responsive-aspect-ratio

Responsive elements with a fixed aspect ratio.

Reserve the vertical space needed by responsive elements on your web document such as images or videos when they are still loading so you can avoid the cumulative layout shift.

Install

$ npm i responsive-aspect-ratio

<script src="https://unpkg.com/responsive-aspect-ratio"></script>

Usage

Simply include the script as described above and add to the parent container of your responsive element a data attribute aspect-ratio with the desired aspect ratio (16:9, 1:1, 4:3...) as a value. For example: data-aspect-ratio="16:9", data-aspect-ratio="1:1", data-aspect-ratio="4:3"...

<div data-aspect-ratio="21:9">
    <video controls autoplay loop src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4"></video>
</div>

<picture data-aspect-ratio="16:9">
    <source srcset="https://placekitten.com/720/405" type="image/jpeg" />
    <img src="https://placekitten.com/720/405" alt="Kitten">
</picture>

<div data-aspect-ratio="4:3">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ante ac erat rutrum ornare auctor vitae nibh. Nam posuere euismod dui, mattis maximus augue molestie nec, in condimentum sem consectetur ut.
    </p>
</div>

Examples

Go to this CodePen to see live example: https://codepen.io/alterebro/full/ZEBKQrY

Info

This is based in the technique also known as the "padding hack" which defines the height of an element as a relative size to the width, taking advantage of the padding intrinsic properties. You probably have already seen it somewhere in some of its forms:

[container] {
    position: relative;
}
[container]:before {
    display: inherit;
    content: '';
    padding-top: 56.25%; /* 16:9 ratio */
}
[content] {
    position: absolute;
    top: 0;
}

[container] {
    position: relative;
    padding: ~"0 0 calc(100% / (16 / 9))"; // 16:9 ratio

    [content] {
        position: absolute;
        top: 0;
    }
}

Further reading

• New aspect-ratio CSS
• Cumulative Layout Shift (CLS), Optimize Cumulative Layout Shift

License

MIT License © Jorge Moreno @alterebro, 2021.