object-fit
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính object-fit CSS xác định cách nội dung của phần tử thay thế, chẳng hạn như <img> hay <video>, được thay đổi kích thước để vừa với khung chứa của nó.
Note:
Thuộc tính object-fit không có hiệu lực với các phần tử <iframe>, <embed>, và <fencedframe>.
Bạn có thể thay đổi căn chỉnh của đối tượng nội dung của phần tử thay thế trong hộp của phần tử bằng cách sử dụng thuộc tính object-position.
Try it
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>
#example-element {
height: 100%;
width: 100%;
border: 2px dotted #888888;
}
Cú pháp
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* Giá trị toàn cục */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;
Thuộc tính object-fit được chỉ định là một từ khóa đơn được chọn từ danh sách các giá trị bên dưới.
Giá trị
contain-
Nội dung thay thế được thu phóng để duy trì tỉ lệ khung hình của nó trong khi vừa với hộp nội dung của phần tử. Toàn bộ đối tượng được lấp đầy hộp, trong khi vẫn giữ nguyên tỉ lệ khung hình, vì vậy đối tượng sẽ có thanh đen trên dưới hoặc thanh đen hai bên nếu tỉ lệ khung hình của nó không khớp với tỉ lệ khung hình của hộp.
cover-
Nội dung thay thế được thu phóng để duy trì tỉ lệ khung hình trong khi lấp đầy toàn bộ hộp nội dung của phần tử. Nếu tỉ lệ khung hình của đối tượng không khớp với tỉ lệ khung hình của hộp, đối tượng sẽ bị cắt xén để vừa.
fill-
Nội dung thay thế được thu phóng để lấp đầy hộp nội dung của phần tử. Đây là giá trị
ban đầu. Toàn bộ đối tượng sẽ lấp đầy hoàn toàn hộp. Nếu tỉ lệ khung hình của đối tượng không khớp với tỉ lệ khung hình của hộp, đối tượng sẽ bị kéo giãn để vừa. none-
Nội dung thay thế không được thay đổi kích thước.
scale-down-
Nội dung được thu phóng như thể
nonehoặccontainđược chỉ định, tùy theo giá trị nào cho kết quả kích thước đối tượng cụ thể nhỏ hơn.
Định nghĩa hình thức
| Initial value | fill |
|---|---|
| Applies to | replaced elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
object-fit =
fill |
none |
[ contain | cover ] || scale-down
Ví dụ
Thiết lập object-fit cho hình ảnh
HTML
<section>
<h2>object-fit: fill</h2>
<img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: contain</h2>
<img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: cover</h2>
<img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: none</h2>
<img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />
<img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>
CSS
h2 {
font-family: "Courier New", monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
img {
width: 150px;
height: 100px;
border: 1px solid black;
margin: 10px 0;
}
.narrow {
width: 100px;
height: 150px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Images Module Level 3 # the-object-fit |
Khả năng tương thích trình duyệt
Xem thêm
- Các thuộc tính CSS liên quan đến hình ảnh khác:
object-position,image-orientation,image-rendering,image-resolution. background-size- Hiểu về tỉ lệ khung hình