Cách duy trì tỷ lệ khung hình

Học cách sử dụng CSS để duy trì tỷ lệ khung hình của các yếu tố.

Cách thực hiện - Chiều cao bằng chiều rộng

Bước 1 - Thêm HTML:

Sử dụng phần tử khối chứa, chẳng hạn như <div>Nếu bạn muốn nó chứa văn bản, hãy thêm một phần tử con:

<div class="container">
  <div class="text">Some text</div> <!-- Nếu bạn muốn có văn bản trong khối chứa -->
</div>

Bước 2 - Thêm CSS:

cho padding-top Thêm phần trăm để duy trì tỷ lệ rộng cao của DIV. Ví dụ sau sẽ tạo ra một DIV có tỷ lệ rộng cao 1:1 (chiều cao và chiều rộng luôn bằng nhau):

Ví dụ - Tỷ lệ rộng cao 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Tỷ lệ rộng cao 1:1 */
  position: relative; /* Nếu bạn muốn có văn bản bên trong */
}
/* Nếu bạn muốn có văn bản trong khối chứa */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Thử trực tiếp

Các tỷ lệ rộng cao khác

Ví dụ - Tỷ lệ rộng cao 16:9

.container {
  padding-top: 56.25%; /* Tỷ lệ rộng cao 16:9 (9 chia cho 16 bằng 0.5625) */
}

Thử trực tiếp

Ví dụ - Tỷ lệ rộng cao 4:3

.container {
  padding-top: 75%; /* Tỷ lệ rộng cao 4:3 (3 chia cho 4 bằng 0.75) */
}

Thử trực tiếp

Ví dụ - Tỷ lệ rộng cao 3:2

.container {
  padding-top: 66.66%; /* Tỷ lệ rộng cao 3:2 (2 chia cho 3 bằng 0.6666) */
}

Thử trực tiếp

Ví dụ - Tỷ lệ rộng cao 8:5

.container {
  padding-top: 62.5%; /* Tỷ lệ rộng cao 8:5 (5 chia cho 8 bằng 0.625) */
}

Thử trực tiếp

Thuộc tính aspect-ratio của CSS

Trong các trình duyệt mới hơn, bạn có thể đơn giản sử dụng CSS aspect-ratio Thuộc tính:

Ví dụ - Tỷ lệ rộng cao 3:2

.container {
  aspect-ratio: 3 / 2;
}

Thử trực tiếp

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này。