image-rendering
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.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS image-rendering đặt thuật toán thu phóng hình ảnh. Thuộc tính này áp dụng cho bản thân phần tử, cho bất kỳ hình ảnh nào được đặt trong các thuộc tính khác của nó, và cho các phần tử con của nó.
Try it
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/lizard.png" />
</section>
#example-element {
height: 480px;
object-fit: cover;
}
Tác nhân người dùng sẽ thu phóng hình ảnh khi tác giả trang chỉ định các kích thước khác với kích thước tự nhiên của nó. Việc thu phóng cũng có thể xảy ra do tương tác người dùng (phóng to). Ví dụ, nếu kích thước tự nhiên của hình ảnh là 100×100px nhưng kích thước thực tế của nó là 200×200px (hoặc 50×50px), thì hình ảnh sẽ được phóng to (hoặc thu nhỏ) bằng thuật toán được chỉ định bởi image-rendering. Thuộc tính này không có hiệu lực đối với các hình ảnh không được thu phóng.
Cú pháp
/* Giá trị từ khóa */
image-rendering: auto;
image-rendering: smooth;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Giá trị toàn cục */
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;
Giá trị
auto-
Thuật toán thu phóng phụ thuộc vào UA. Kể từ phiên bản 1.9 (Firefox 3.0), Gecko sử dụng lấy mẫu lại bilinear (chất lượng cao).
smooth-
Hình ảnh nên được thu phóng bằng một thuật toán tối đa hóa vẻ ngoài của hình ảnh. Cụ thể, các thuật toán thu phóng "làm mịn" màu sắc là chấp nhận được, chẳng hạn như nội suy bilinear. Điều này dành cho các hình ảnh như ảnh chụp.
crisp-edges-
Hình ảnh được thu phóng bằng một thuật toán như "nearest neighbor" để bảo tồn độ tương phản và các cạnh trong hình ảnh. Thường dành cho các hình ảnh như pixel art hoặc bản vẽ đường thẳng, không xảy ra làm mờ hoặc làm mịn màu sắc.
pixelated-
Hình ảnh được thu phóng bằng thuật toán "nearest neighbor" hoặc tương tự đến bội số nguyên gần nhất của kích thước hình ảnh gốc, sau đó dùng nội suy mịn để đưa hình ảnh đến kích thước cuối cùng mong muốn. Điều này nhằm bảo tồn giao diện "pixel hóa" mà không gây ra các hiện vật thu phóng khi độ phân giải phóng to không phải là bội số nguyên của bản gốc.
Note:
Các giá trị optimizeQuality và optimizeSpeed có trong một bản nháp đầu (và đến từ đối tác SVG image-rendering) được định nghĩa là từ đồng nghĩa tương ứng với các giá trị smooth và pixelated.
Note:
Mô-đun hình ảnh CSS định nghĩa một giá trị high-quality cho thuộc tính image-rendering để ưu tiên thu phóng chất lượng cao hơn, tuy nhiên điều này chưa được hỗ trợ trong bất kỳ trình duyệt nào.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
image-rendering =
auto |
smooth |
high-quality |
pixelated |
crisp-edges
Ví dụ
Đặt thuật toán thu phóng hình ảnh
Trong ví dụ này, một hình ảnh được lặp lại ba lần, mỗi lần áp dụng một giá trị image-rendering khác nhau.
CSS
.auto {
image-rendering: auto;
}
.smooth {
image-rendering: smooth;
}
.pixelated {
image-rendering: pixelated;
}
.crisp-edges {
image-rendering: crisp-edges;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |
Tương thích trình duyệt
Xem thêm
object-fitobject-positionimage-orientationimage-resolution- Mô-đun hình ảnh CSS
- Thuộc tính SVG
image-rendering