Bằng cách chỉ định phần đệm của một phần tử theo tỷ lệ phần trăm, chúng tôi có thể duy trì Tỷ lệ khung hình của nó.
Đối với điều này, hãy sử dụng thuộc tính CSS padding -
-
padding-bottom chỉ định phần đệm dưới cùng của một phần tử.
-
padding-top chỉ định phần đệm trên cùng của một phần tử.
-
Khoảng đệm bên trái chỉ định phần đệm bên trái của một phần tử.
-
Khoảng đệm bên phải chỉ định phần đệm bên phải của một phần tử.
-
Phần đệm đóng vai trò viết tắt cho các thuộc tính trước đó.
Ví dụ
Các ví dụ sau minh họa thuộc tính đệm CSS để duy trì tỷ lệ khung hình.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
padding-top: 100%;
box-shadow: 0 0 24px steelblue;
position: relative;
width: 100%;
}
div > div {
margin: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<p>Watch the below div</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ngay cả sau khi thay đổi kích thước cửa sổ, tỷ lệ khung hình vẫn là 1:1.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
