Scheda immagine con proporzioni

Quando ridimensioni la scheda, con la proprietà aspect-ratio il blocco visivo verde mantiene queste proporzioni 16 x 9. Le proporzioni con aspect-ratio: 16 / 9 vengono rispettate.

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

Per mantenere le proporzioni 16 x 9 senza questa proprietà, devi utilizzare una compromissione di padding-top e aggiungere una spaziatura interna pari a 56.25% per impostare un rapporto dalla larghezza massima. Presto avremo una proprietà per evitare la compromissione e la necessità di calcolare la percentuale. Puoi creare un quadrato con le proporzioni 1 / 1, un rapporto 2 a 1 con 2 / 1 e proprio tutto ciò di cui hai bisogno per ridimensionare questa immagine con le proporzioni impostate.

.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;
}