Thẻ hình ảnh có tỷ lệ khung hình

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 tôi đ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 kỹ thuật tấn công padding-top và cung cấp khoảng đệm 56.25% để đặt tỷ lệ giữa cao nhất và chiều rộng. Chúng tôi sẽ sớm có một tài sản cho trường hợp này để tránh bị tấn công và cần tính toán tỷ lệ phần trăm. Bạn có thể tạo hình vuông có tỷ lệ 1 / 1, tỷ lệ 2:1 với 2 / 1 và bất kỳ thứ gì bạn cần để hình ảnh này có thể điều chỉnh theo tỷ lệ với tỷ lệ kích thước đã đặt.

.square {
  aspect-ratio: 1 / 1;
}

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

        .parent {
  display: grid;
  place-items: center;
}

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

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}