Thuộc tính tỷ lệ khung hình CSS
Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc aspect-ratio
cho phép bạn xác định tỷ lệ giữa chiều rộng và chiều cao của một phần tử.
Nếu các thuộc tính aspect-ratio
và width
được đặt thì chiều cao sẽ tuân theo tỷ lệ khung hình đã xác định.
Để hiểu rõ hơn về thuộc tính aspect-ratio
, hãy xem bản demo .
Mẹo: Sử dụng thuộc tính aspect-ratio
hình trong bố cục thích ứng trong đó các thành phần thường có kích thước khác nhau và bạn muốn duy trì tỷ lệ giữa chiều rộng và chiều cao.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.aspectRatio="16/9" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
aspect-ratio | 88 | 88 | 89 | 15 | 74 |
Cú pháp CSS
aspect-ratio: number/number |initial|inherit;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
number | First number specifies the number for width in aspect ratio. | Demo ❯ |
number | Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Thuộc tính aspect-ratio
phù hợp để kiểm soát tỷ lệ khung hình của các phần tử div nếu các phần tử div được cho là có kích thước khác nhau. Đây có thể là trường hợp trong thư viện hình ảnh khi bạn muốn các phần tử div có kích thước linh hoạt để trông đẹp mắt trên tất cả các thiết bị, nhưng bạn cũng muốn giữ nguyên tỷ lệ giữa chiều rộng và chiều cao của hình ảnh:
#container > div {
aspect-ratio: 3/2;
}
Trang liên quan
Hướng dẫn CSS: Mô-đun bố cục lưới CSS
Thuộc tính phù hợp với đối tượng CSS: Thuộc tính phù hợp với đối tượng CSS
Thuộc tính vị trí đối tượng CSS: Thuộc tính vị trí đối tượng CSS