顯示比例圖片資訊卡

使用 aspect-ratio 屬性調整資訊卡大小時，綠色視覺區塊會維持 16 x 9 的長寬比。我們會遵循 aspect-ratio: 16 / 9 的顯示比例。

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

為了在沒有這項屬性的情況下維持 16 x 9 的長寬比，您必須使用 padding-top Hack，並為其加上 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;
}