Với thuộc tính aspect-ratio
, khi bạn đổi kích thước thẻ, khối hình ảnh màu xanh lục sẽ duy trì tỷ lệ khung hình 16 x 9 này. Chúng ta đang tuân thủ tỷ lệ khung hình bằng aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
Để duy trì tỷ lệ khung hình 16 x 9 mà không cần thuộc tính này, bạn cần sử dụng mã gian lận padding-top
và đặt khoảng đệm là 56.25%
để đặt tỷ lệ chiều cao trên chiều rộng. Chúng tôi sẽ sớm có một thuộc tính để tránh bị hack và không cần tính phần trăm. Bạn có thể tạo hình vuông với tỷ lệ 1 / 1
, tỷ lệ 2 trên 1 với 2 / 1
và thực sự là bất kỳ tỷ lệ nào bạn cần để hình ảnh này có thể điều chỉnh theo tỷ lệ kích thước đã đặt.
.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;
}