Đối tượng kiểu đối tượngFit thuộc tính
Thí dụ
Cắt các cạnh của hình ảnh, giữ nguyên tỷ lệ co và điền vào khoảng trống:
document.getElementById("myImg").style.objectFit = "cover";
Định nghĩa và Cách sử dụng
Thuộc tính objectFit được sử dụng để chỉ định cách thay đổi kích thước của <img> hoặc <video> để vừa với vùng chứa của nó.
Thuộc tính này cho biết nội dung cần lấp đầy vùng chứa theo nhiều cách khác nhau; chẳng hạn như "giữ nguyên tỷ lệ khung hình đó" hoặc "mở rộng và chiếm nhiều dung lượng nhất có 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 | |||||
---|---|---|---|---|---|
objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Cú pháp
Trả về thuộc tính objectFit:
object.style.objectFit
Đặt thuộc tính objectFit:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
Giá trị tài sản
Value | Description |
---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit |
none | The replaced content is not resized |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Chi tiết kỹ thuật
Giá trị mặc định: | lấp đầy |
---|---|
Giá trị trả lại: | Một chuỗi, đại diện cho sự phù hợp đối tượng của một phần tử |
Phiên bản CSS | CSS3 |
Các trang liên quan
Hướng dẫn CSS: CSS object-fit
Tham chiếu CSS: thuộc tính object-fit
❮ Đối tượng phong cách