Thiết lập tỉ lệ 16:9 / 4:3 cho hình ảnh và video

23/07/2023

Err

Cỡ chữ: A^- A⁺

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é 👇