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