<ratio>

Cú pháp

Kiểu dữ liệu <ratio> là một <number> theo sau là dấu gạch chéo ('/', Unicode U+002F SOLIDUS) và một <number> thứ hai. Cả hai số phải là số dương. Khoảng trắng trước và sau dấu gạch chéo là tùy chọn. Số đầu tiên đại diện cho chiều rộng, còn số thứ hai đại diện cho chiều cao. Ngoài ra, một <number> đơn lẻ làm giá trị cũng được chấp nhận.

Hai tỷ lệ được so sánh bằng giá trị số của thương số. Ví dụ, 16/16 nhỏ hơn 16/9 vì nó phân giải thành 1 trong khi cái thứ hai phân giải thành 1.7. Điều này có nghĩa là tỷ lệ khung hình của màn hình dọc nhỏ hơn màn hình ngang, và ảnh dọc có tỷ lệ khung hình nhỏ hơn ảnh ngang.

Các tỷ lệ khung hình phổ biến

Tỷ lệ		Sử dụng
4/3 hoặc 1.33333		Định dạng TV truyền thống thế kỷ XX.
16/9 hoặc 1.7777778		Định dạng TV "màn hình rộng" hiện đại.
185/100 hoặc 1.85		Định dạng phim phổ biến nhất từ những năm 1960.
239/100 hoặc 2.39		Định dạng phim anamorphic "màn hình siêu rộng".

Cú pháp chính thức

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

Ví dụ

Dùng trong media query

@media screen and (aspect-ratio >= 16/9) {
  /* … */
}

Dùng trong @container size query

@container (aspect-ratio > 1) and (width < 20em) {
  /* … */
}

Dùng làm giá trị thuộc tính CSS

.square {
  aspect-ratio: 1 / 1;
}
.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}
.portrait {
  aspect-ratio: 5 / 7;
}

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Bộ mô tả media aspect-ratio
• Hiểu về tỷ lệ khung hình
• Hướng dẫn CSS container queries
• Hướng dẫn Using container size and style queries
• Mô-đun CSS media queries
• Mô-đun CSS containment
• Mô-đun CSS box sizing
• Mô-đun CSS values and units