宽高比图片卡片

使用 aspect-ratio 属性后，当您调整卡片大小时，绿色视觉块会保持 16x9 这一宽高比。我们会遵循 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;
}