Карточка изображения с соотношением сторон

Благодаря свойству aspect-ratio при изменении размера карты зеленый визуальный блок сохраняет соотношение сторон 16 x 9. Мы соблюдаем соотношение сторон с aspect-ratio: 16 / 9 .

.video {
  aspect-ratio: 16 / 9;
}

Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, вам нужно будет использовать трюк padding-top и задать ему отступ 56.25% , чтобы установить соотношение верха и ширины. Скоро у нас появится свойство для этого, чтобы избежать взлома и необходимости вычислять проценты. Вы можете создать квадрат с соотношением 1 / 1 , соотношением 2 к 1 с 2 / 1 и вообще все, что вам нужно, чтобы это изображение масштабировалось с заданным соотношением размеров.

.square {
  aspect-ratio: 1 / 1;
}

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}