Các image-renderingđịnh nghĩa bất động sản như thế nào trình duyệt nên làm cho một hình ảnh nếu nó được nhân rộng lên hoặc xuống từ kích thước ban đầu của nó. Theo mặc định, mỗi trình duyệt sẽ cố gắng áp dụng răng cưa cho hình ảnh được chia tỷ lệ này để ngăn chặn sự biến dạng, nhưng điều này đôi khi có thể là một vấn đề nếu chúng tôi muốn hình ảnh giữ nguyên dạng pixel ban đầu của nó.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Về ba giá trị có thể có:
auto: giá trị mặc định sử dụng thuật toán tiêu chuẩn của trình duyệt để tối đa hóa sự xuất hiện của hình ảnh.crisp-edges: độ tương phản, màu sắc và các cạnh của hình ảnh sẽ được giữ nguyên mà không bị làm mịn hoặc mờ. Theo thông số kỹ thuật, điều này đặc biệt dành cho nghệ thuật pixel. Giá trị này áp dụng cho hình ảnh được phóng to hoặc thu nhỏ.pixelated: khi hình ảnh thay đổi kích thước, trình duyệt sẽ duy trì kiểu pixel của nó bằng cách sử dụng tỷ lệ hàng xóm gần nhất. Giá trị này chỉ áp dụng cho hình ảnh được mở rộng.
Thuộc tính này có thể được áp dụng cho hình nền, canvascác phần tử cũng như hình ảnh nội tuyến. Tuy nhiên, điều quan trọng cần lưu ý là việc kiểm tra các giá trị này tại thời điểm này đặc biệt khó hiểu vì thiếu hỗ trợ trình duyệt nhất quán.
Thí dụ
Đây là một hình ảnh nội tuyến rất nhỏ được tạo thành từ bốn pixel màu:
Nếu chúng tôi thay đổi chiều rộng của hình ảnh nội tuyến này thành 300pxthì trong Chrome (41), chúng tôi sẽ thấy trình duyệt đã cố gắng tối ưu hóa hình ảnh tốt nhất có thể:
Để giữ lại giao diện pixel ban đầu, chúng ta có thể sử dụng pixelatedgiá trị sau , như sau:
img ( image-rendering: pixelated; )Điều này dẫn đến việc trình duyệt chọn một thuật toán thay thế để xử lý hình ảnh. Trong ví dụ này, Chrome sẽ xóa răng cưa mặc định:
Thật không may, sau rất nhiều thử nghiệm, có vẻ như các trình duyệt diễn giải các giá trị crisp-edgesvà pixelatedtheo những cách rất khó hiểu vào thời điểm hiện tại, vì vậy điều quan trọng cần lưu ý một lần nữa là thông số kỹ thuật này đang ở những ngày đầu tiên. Ví dụ: Chrome dường như hiển thị pixelatedhình ảnh giống như cách mà Firefox và Safari sẽ hiển thị hình ảnh crisp-edges.
Ví dụ mã QR
Một trường hợp sử dụng khác của thuộc tính này có thể dành cho mã QR mà bạn muốn tăng kích thước của nó mà không làm biến dạng nó bằng cách sử dụng khử răng cưa tiêu chuẩn. Đảm bảo kiểm tra ví dụ này ở chế độ toàn màn hình để xem hình ảnh kéo dài:
Xem bản trình diễn kết xuất hình ảnh Pen của Robin Rendle (@robinrendle) trên CodePen.
ví dụ đưa ra
Trong Bút bên dưới, bạn có thể chuyển đổi giữa các giá trị này và xem sự khác biệt giữa các trình duyệt:
Xem bản trình diễn kết xuất Hình ảnh Bút của Robin Rendle (@robinrendle) trên CodePen.
Hỗ trợ trình duyệt
crisp-edgeshiện yêu cầu tiền tố nhà cung cấp ( -moz-crisp-edges) để nhận được hỗ trợ tốt nhất có thể.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
Tại thời điểm cập nhật này, Firefox 61 hỗ trợ crisp-edgesnhưng không pixelatedvà Chrome 68 hỗ trợ pixelatednhưng không crisp-edges.