Thuộc tính Style objectFit
Ví dụ
Cắt các cạnh của hình ảnh, giữ nguyên tỷ lệ khung hình và điền vào khoảng trống:
document.getElementById("myImg").style.objectFit = "cover";
Hãy tự mình thử »Sự miêu tả
Thuộc tính objectFit được sử dụng để chỉ định cách thay đổi kích thước <img> hoặc <video> để phù hợp với vùng chứa của nó.
Thuộc tính này yêu cầu nội dung lấp đầy vùng chứa theo nhiều cách khác nhau; chẳng hạn như "duy trì tỷ lệ khung hình đó" hoặc "kéo dài và chiếm nhiều không gian 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: | đổ đầy |
---|---|
Giá trị trả về: | Một Chuỗi, biểu thị sự phù hợp với đối tượng của một phần tử |
Phiên bản CSS | CSS3 |
Trang liên quan
Hướng dẫn CSS: CSS phù hợp với đối tượng
Tham chiếu CSS: thuộc tính phù hợp với đối tượng