Aspect Ratio

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

The <app-aspect-ratio> is a simple component 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.