Aspect Ratio

This is a simple component that ensures a block will maintain the specified aspect ratio.

What is Aspect Ratio?

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 ratio calculator to check the dimensions when resizing images.

Aspect Ratio Component

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 old CSS technique 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.

<div style="width:80%; margin: 0px auto;">
  <app-aspect-ratio [ratio]="{w:2, h:1}">
    <span>This container will always have a 2:1 aspect ratio</span>
  </app-aspect-ratio>
</div>

See the live Showcase to learn how to use and customize the Aspect Ratio. There are lots of examples to help you using this component.