Karta obrazu ze współczynnikiem proporcji

Dzięki właściwości aspect-ratio podczas zmiany rozmiaru karty zielony blok wizualny zachowuje współczynnik proporcji 16 x 9. Nadal zachowujemy proporcje obrazu aspect-ratio: 16 / 9.

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

Aby zachować współczynnik proporcji 16 x 9 bez tej właściwości, musisz użyć hakera padding-top i dodać do niego dopełnienie o wartości 56.25%, co pozwoli ustawić współczynnik proporcji od góry do szerokości. Wkrótce udostępnimy odpowiednią usługę, która pozwoli uniknąć ataku i konieczności obliczenia wartości procentowej. Możesz utworzyć kwadrat o współczynniku proporcji 1 / 1, współczynniku 2:1 w 2 / 1 i wszystkim, czego potrzebujesz, aby ten obraz był skalowany przy ustalonym współczynniku rozmiaru.

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