🥸aspect-ratio (Phần 30)

1. Có hẳn thuộc tính CSS aspect-ratio

Từ trước đến giờ mỗi lần muốn tạo 1 khối (hình ảnh/video) theo 1 tỷ lệ 16:9, 4:3, 3:2 mình thường làm Aspect Ratio bằng cách sử dụng padding-top. Ví dụ:

• Tỉ lệ 1:1 -> padding-top: 100%

• Tỉ lệ 4:3 -> padding-top: 75%

• Tỉ lệ 3:2 -> padding-top: 66.67%

• Tỉ lệ 16:9 -> padding-top: 56.25%

• Hoặc 1 tỉ lệ bất kỳ, mà giúp cho cái box đó có khả năng responsive -> padding-top: (height_image/width_image) * 100% (Giống như cách làm responsive cho video ở Phần 1 của series này)

Và đầu năm 2021 Chrome 88 đã mang lại cho chúng ta 1 thuộc tính mới là aspect-ratio. Ví dụ với tỉ lệ 16:9, bạn chỉ cần viết CSS aspect-ratio: 16 / 9.

<div>My name is 16x9</div>
div {
  background: lime;
  width: 100%;
  // aspect-ratio: 16 / 9;
}

<div>My name is 16x9</div>
div {
  background: lime;
  width: 100%;
  aspect-ratio: 16 / 9;
}

Thử luôn demo với iframe

<iframe src="https://www.youtube.com/embed/0Gr1XSyxZy0">

iframe {
   width: 75%;
   // aspect-ratio: 16/9;
}

<iframe src="https://www.youtube.com/embed/0Gr1XSyxZy0">
iframe {
   width: 75%;
   aspect-ratio: 16/9;
}