CSS aspect-ratio Property - Playground Example

« Back to CSS aspect-ratio Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#aspect {
   border: 1px solid blue;
   background: #f2f2f2;
   width: 400px;
   aspect-ratio: 16/9;
}
</style>
</head>
<body>
<div>
    <label><input type="radio" name="aspectvalue" value="1/1">1/1</label>
    <label><input type="radio" name="aspectvalue" value="2/1">2/1</label>
    <label><input type="radio" name="aspectvalue" value="4/3">4/3</label>
    <label><input type="radio" name="aspectvalue" value="16/9" checked>16/9</label>
    <label><input type="radio" name="aspectvalue" value="21/9">21/9</label>
</div>
<div id="aspect">The aspect-ratio CSS property allows you to define the width-to-height ratio of an element. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio. The aspect-ratio property is especially useful for creating responsive layouts, where elements need to be able to resize without losing their proportions. For example, you could use aspect-ratio to create a video player that maintains its 16:9 aspect ratio on all devices, or a social media post that looks good on both desktop and mobile screens.</div>
<script>
if (document.querySelector('input[name="aspectvalue"]')) {
  document.querySelectorAll('input[name="aspectvalue"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
      var item = event.target.value;
      document.getElementById("aspect").style.aspectRatio = item;
    });
  });
}
</script>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee