Thuộc tính aspect-ratio CSS

định nghĩa và cách sử dụng

aspect-ratio thuộc tính cho phép bạn xác định tỷ lệ giữa chiều rộng và chiều cao của phần tử.

nếu được thiết lập aspect-ratio và width thuộc tính, chiều cao sẽ được điều chỉnh theo tỷ lệ khung hình được định nghĩa.

để hiểu rõ hơn aspect-ratio thuộc tính, hãy xem演示.

lưu ý:sử dụng trong bố cục响应 aspect-ratio thuộc tính, khi kích thước của phần tử thay đổi thường xuyên, bạn muốn giữ tỷ lệ giữa chiều rộng và chiều cao.

mô hình

ví dụ 1

thêm tỷ lệ chiều rộng và chiều cao cho phần tử:

div {
  aspect-ratio: 3 / 2;
}

thử ngay

ví dụ 2

nếu kích thước của phần tử div cần thay đổi,aspect-ratio thuộc tính rất phù hợp để kiểm soát tỷ lệ chiều rộng và chiều cao của phần tử div. Ví dụ, trong thư viện hình ảnh, bạn muốn phần tử div có kích thước linh hoạt để phù hợp với tất cả các thiết bị, nhưng lại muốn giữ tỷ lệ khung hình của hình ảnh:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>con đường hẹp</div>
  <div>các bông hoa dọc theo đường phố</div>
  <div>núi</div>
  <div>Cinque Terre</div>
</div>

thử ngay

cú pháp CSS

aspect-ratio: số/số|initial|inherit;

giá trị thuộc tính

giá trị mô tả
số số thứ nhất xác định giá trị chiều rộng trong tỷ lệ khung hình.
số

số thứ hai xác định giá trị chiều cao trong tỷ lệ khung hình.

tùy chọn. Nếu không được thiết lập, giá trị chiều cao mặc định là 1.
initial đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit thuộc tính này được kế thừa từ phần tử cha. Xem thêm inherit.

chi tiết kỹ thuật

giá trị mặc định: auto
thuộc tính kế thừa: không
chế tạo animation: hỗ trợ. Xem thêm:thuộc tính liên quan đến animation.
phiên bản: CSS3
cú pháp JavaScript: object.style.aspectRatio="16/9"

hỗ trợ trình duyệt

số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
88 88 89 15 74

trang liên quan

hướng dẫn:Mô-đun布局 lưới trong CSS

tham khảo:Thuộc tính Object-fit trong CSS

tham khảo:Thuộc tính Object-position trong CSS