顯示比例圖片資訊卡

使用 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;
}

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