Thuộc tính kết xuất hình ảnh CSS
Thí dụ
Hiển thị các thuật toán khác nhau có thể được sử dụng để chia tỷ lệ hình ảnh:
.image {
height: 100px;
width: 100px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.smooth {
image-rendering: smooth;
}
.high-quality {
image-rendering: high-quality;
}
Định nghĩa và Cách sử dụng
Thuộc image-renderingtính chỉ định loại thuật toán được sử dụng để chia tỷ lệ hình ảnh.
Lưu ý: Thuộc tính này không ảnh hưởng đến hình ảnh không được chia tỷ lệ.
| Giá trị mặc định: | Tự động |
|---|---|
| Thừa hưởng: | Đúng |
| Hoạt hình: | không. Đọc về hoạt hình |
| Phiên bản: | CSS3 |
| Cú pháp JJavaScript: | đối tượng .style.imageRendering = "pixelated" |
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 | |||||
|---|---|---|---|---|---|
| image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
Chrome, Edge, Opera và Safari sử dụng tên thay thế cho giá trị
crisp-edges:.-webkit-optimize-contrast
Cú pháp CSS
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
Giá trị tài sản
| Value | Description |
|---|---|
| auto | Let the browser choose the scaling algorithm. This is default |
| smooth | Use an algorithm that smooth out the colors in the image |
| high-quality | Same as smooth, but with a preference for higher-quality scaling |
| crisp-edges | Use an algorithm that will preserve the contrast and edges in the image |
| pixelated | If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |