1. Làm sắc nét hình ảnh với image-rendering
Khi một hình ảnh được phóng to, trình duyệt làm mịn hình ảnh, do đó, nó không nhìn pixelated. Tuy nhiên, tùy thuộc vào độ phân giải của hình ảnh và màn hình, điều này có thể không phải là tốt nhất mọi lúc. Bạn có thể kiểm soát hành vi trình duyệt này với thuộc tính hiển thị hình ảnh.
Thuộc tính được hỗ trợ tốt này điều khiển thuật toán được sử dụng để phóng to một hình ảnh. Hai giá trị chính của nó là crisp-edges và pixelated
Giá trị crisp-edges duy trì độ tương phản giữa các điểm ảnh. Nói cách khác, không làm mịn được thực hiện cho hình ảnh, mà tuyệt vời cho điểm ảnh nghệ thuật.
Khi pixelated được sử dụng, các điểm ảnh gần đó của một điểm ảnh có thể chiếm diện mạo của nó, làm cho nó giống như nhau tạo thành một pixel lớn, tuyệt vời cho màn hình có độ phân giải cao.
Nếu bạn tiếp tục xem xét chặt chẽ các cạnh hoa trong GIF bên dưới, bạn có thể thấy sự khác biệt giữa hình ảnh bình thường và hình ảnh có pixelated.
img {
image-rendering: pixelated;
}
2. Giãn các hình ảnh với object-fit
contain, cover, fill các giá trị đều quen thuộc, chúng tôi sử dụng chúng cho thuộc tính background-size để kiểm soát cách một hình nền điền vào phần tử nó thuộc về. Thuộc tính object-fit tương đối giống với nó, vì nó cũng xác định cách kích thước hình ảnh bên trong vùng chứa của nó.
Giá trị contain chứa hình ảnh trong vùng chứa của nó. cover không giống nhau, nhưng nếu tỉ lệ co hình ảnh và vùng chứa không khớp, hình ảnh sẽ bị cắt bớt. fill làm cho hình ảnh để căng và điền vào container. scale-down chọn phiên bản nhỏ nhất của hình ảnh để hiển thị.
Chủ Đề