Thuộc tính CSS image-rendering

定義和用法

image-rendering Thuộc tính xác định loại thuật toán sử dụng để phóng to hình ảnh.

Lưu ý:Thuộc tính này không có hiệu lực đối với hình ảnh không được thu nhỏ.

Mô hình

Hiển thị các thuật toán khác nhau có thể sử dụng để phóng to 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;
}

Thử ngay

Ngữ pháp CSS

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Cho phép trình duyệt chọn thuật toán phóng to. Giá trị mặc định.
smooth Sử dụng một thuật toán để làm mịn màu sắc của hình ảnh
high-quality Tương tự như smooth nhưng ưa thích việc phóng to chất lượng cao hơn
crisp-edges Sử dụng một thuật toán để duy trì độ tương phản và cạnh của hình ảnh
pixelated

Nếu hình ảnh bị phóng to, nó sẽ sử dụng thuật toán nearest-neighbor, vì vậy hình ảnh sẽ trông như được tạo từ các pixel lớn.

Nếu hình ảnh bị thu nhỏ, nó sẽ tương tự như auto.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: yes
Tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Ngữ pháp JavaScript: object.style.imageRendering="pixelated"

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge và Opera sử dụng -webkit-optimize-contrast làm tên gọi tắt cho giá trị crisp-edges.