Cách thực hiện - Tỷ lệ khung hình
Tìm hiểu cách duy trì tỷ lệ khung hình của một phần tử bằng CSS.
Tỷ lệ khung hình
Tạo các phần tử linh hoạt giữ tỷ lệ khung hình của chúng (4:3, 16:9, v.v.) khi thay đổi kích thước:
Tỷ lệ khung hình là gì?
Tỷ lệ khung hình của một phần tử mô tả mối quan hệ tỷ lệ giữa chiều rộng và chiều cao của nó. Hai tỷ lệ khung hình video phổ biến là 4:3 (định dạng video phổ biến của thế kỷ 20) và 16:9 (phổ biến cho truyền hình HD và truyền hình kỹ thuật số châu Âu và mặc định cho video YouTube).
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ử vùng chứa, như <div> và nếu bạn muốn văn bản bên trong phần tử đó, hãy thêm phần tử con:
Ví dụ
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Bước 2) Thêm CSS:
Thêm giá trị phần trăm cho padding-top
để duy trì tỷ lệ khung hình của DIV. Ví dụ sau sẽ tạo tỷ lệ khung hình 1:1 (chiều cao và chiều rộng luôn bằng nhau):
Ví dụ về tỷ lệ khung hình 1:1
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Hãy tự mình thử »Các tỷ lệ khung hình khác:
Ví dụ về Tỷ lệ khung hình 16:9
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Hãy tự mình thử »Ví dụ 4:3 Tỷ lệ khung hình
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Hãy tự mình thử »Ví dụ 3:2 Tỷ lệ khung hình
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Hãy tự mình thử »Ví dụ 8:5 Tỷ lệ khung hình
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}
Hãy tự mình thử »Thuộc tính CSS tỷ lệ khung hình
Trong các trình duyệt mới hơn, bạn chỉ cần sử dụng thuộc tính aspect-ratio
CSS:
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
aspect-ratio | 88 | 88 | 89 | 15 | 74 |