<div class="container max-width-xs padding-y-md">
  <div class="custom-aspect-ratio">
    <img src="https://s-sd.ru/templates/ssdru/img/Seawater-aquarium.jpg" alt="Image description">
  </div>
</div>

/* 💡 CSS Nugget: Соотношение сторон в CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/sootnoshenie-storon-v-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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.