LÀM THẾ NÀO ĐỂ - Tỷ lệ khung hình
Tìm hiểu cách duy trì tỷ lệ co 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ữ nguyên tỷ lệ co 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ệ co 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 phần tử đó. Hai tỷ lệ khung hình phổ biến của video 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).
Làm thế nào để - Chiều cao bằng chiều rộng
Bước 1) Thêm HTML:
Sử dụng một phần tử vùng chứa, như <div> và nếu bạn muốn văn bản bên trong nó, hãy thêm một phần tử con:
Thí 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 padding-top
để duy trì tỷ lệ co 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ụ 1: 1 Tỷ lệ khung hình
.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;
}
Các tỷ lệ khung hình khác:
Ví dụ 16: 9 Tỷ lệ khung hình
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Ví dụ 4: 3 Tỷ lệ khung hình
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Ví dụ 3: 2 Tỷ lệ khung hình
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Ví dụ 8: 5 Tỷ lệ khung hình
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}