aspect-ratio: 16 / 9 sizes an element to a proportion: set the width and the height follows. It prevents layout shift for images/iframes before they load and keeps cards and video embeds proportioned without padding-hack tricks.
aspect-ratio: 16 / 9 sizes an element to a proportion: set the width and the height follows. It prevents layout shift for images/iframes before they load and keeps cards and video embeds proportioned without padding-hack tricks.
<!doctype html><html><head><meta charset="utf-8">
<style>.v{aspect-ratio:16/9;width:100%;max-width:360px;background:#140a28;display:grid;place-items:center;color:#e6e0ff}</style></head><body style="background:#06040d;padding:20px"><div class="v">16:9, no padding hack</div></body></html>