Di chuyển ảnh trong css

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ị.

  


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

3. Thay đổi hình ảnh với object-position

Tương tự như thuộc tính background-position bổ sung của background-size, cũng có một thuộc tính object-position cho object-fit phù hợp.

Thuộc tính object-fit di chuyển một hình ảnh bên trong một image container đến các toạ độ nhất định. Các tọa độ có thể được định nghĩa là các đơn vị độ dài tuyệt đối, các đơn vị chiều dài tương đối, các từ khoá (top, left, center, bottom, và right), hoặc sự kết hợp hợp lệ của chúng (top 20px right 5px, center right 80px).

  


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

4. Vị trí hình ảnh với vertical-align

Thỉnh thoảng chúng tôi thêm

5. Shadow hình ảnh với filter: drop-shadow()

Khi được sử dụng không chú ý trong văn texts và boxes, shadow có thể thêm sự sống vào một trang web. Điều này cũng đúng với hình ảnh. Hình ảnh có hình dạng lõi và nền trong suốt có thể có lợi từ drop-shadow CSS filter. Đối số của nó tương tự như các giá trị của thuộc tính CSS shadow-related (text-shadow, box-shadow). Hai phần đầu tiên biểu diễn khoảng cách dọc và ngang giữa các shadow và hình ảnh, thứ ba và thứ tư là độ mờ và bán kính rải của shadow, và màu cuối cùng là màu shadow.

Giống như text-shadow, drop-shadow cũng tạo ra một cái bóng được đúc khuôn cho đối tượng thuộc. Vì vậy, khi nó được áp dụng cho một hình ảnh, bóng sẽ có hình dạng của phần hình ảnh nhìn thấy được.

img {
  filter: drop-shadow(0 0 5px blue);
}

Tham khảo tại: https://www.hongkiat.com/blog/img-css-properties/