Tỉ lệ hình ảnh/video 16:9 và 4:3 là hai tỉ lệ thông dụng và thân thiện nhất đối với người dùng cũng như trình duyệt web.
1. Tỉ lệ 16:9
.media-16-9 {
display: block;
position: relative;
background-color: #000;
padding-top: 56.25%;
}
.media-16-9 * {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}2. Tỉ lệ 4:3
.media-4-3 {
display: block;
position: relative;
background-color: #000;
padding-top: 75%;
}
.media-4-3 * {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}Thật đơn giản phải không!? Nếu bạn có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới nhé 👇
