<section>
  <div class="custom-aspect-ratio">
    <img src="https://images.unsplash.com/photo-1565299390096-8e363b857759?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Image description">
  </div>
</section>
/* -------------------------------- 

šŸ’” Aspect Ratio fallback in CSS
šŸ”— https://codyhouse.co/nuggets/aspect-ratio-in-css

-------------------------------- */

.custom-aspect-ratio {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
}

.custom-aspect-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* demo stuff */
section {
  width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
  padding: 3rem 0;
}

External CSS

  1. https://codepen.io/codyhouse/pen/PoaqJWp.css

External JavaScript

  1. https://unpkg.com/codyhouse-framework/main/assets/js/util.js