Aspect Ratio
This is a simple component that ensures a block will maintain the specified aspect ratio.
Last updated
Was this helpful?
This is a simple component that ensures a block will maintain the specified aspect ratio.
Last updated
Was this helpful?
Aspect ratio is a term to describe the proportional relationship between the width and height of an image.
For example, the films at the movie theater, they have an aspect ratio of 16:9. This has nothing to do with the actual quality or size of the image, it just means that the width of the image is almost twice as high as the length.
Aspect ratio normally refers to the proportions of an object’s size in different dimensions.
You can use this to check the dimensions when resizing images.
The <app-aspect-ratio> is a simple component available on this template that ensures a block will maintain the specified aspect ratio.
It uses an to adjust the height of the element based on its width (using padding-bottom).
This is a very handy component to prevent content from jumping around while the page is loading.
Note: The <app-aspect-ratio> component must be surrounded by a container element with a defined width, as this component will fill the parent width.