Card de imagem com proporção

Com a propriedade aspect-ratio, quando você redimensiona o card, o bloco visual verde mantém essa proporção de 16 x 9. Estamos respeitando a proporção com aspect-ratio: 16 / 9.

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

Para manter a proporção de 16 x 9 sem essa propriedade, você precisaria usar uma hack padding-top e atribuir um padding de 56.25% a ela para definir uma proporção de cima para largura. Em breve, teremos uma propriedade para isso, a fim de evitar a invasão e a necessidade de calcular a porcentagem. É possível fazer um quadrado com proporção de 1 / 1, uma proporção de 2 para 1 com 2 / 1 e tudo o que você precisar para que essa imagem seja dimensionada com uma proporção de tamanho definida.

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

HTML

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

CSS

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

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

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