×

Cách crop hình ảnh bằng css

Crop hình ảnh bằng css là gì?

Nếu bạn đang có hình ảnh với kích thước khá lớn, nhưng vì một số lý do nào đó bạn muốn nó có một kích thước nhất định để thiết kế cho trang web của mình. Tuy nhiên để không làm cho hình ảnh thay đổi kích thước theo dạng thu nhỏ (đặt width, height để thay đổi kích thước, nhưng sẽ làm cho hình ảnh bị biến dạng với kích thước ban đầu), thì bạn vẫn có thể cắt nó theo kích thước mong muốn, như vậy việc này gọi là crop hình ảnh.

Ví dụ:

Hình ảnh trước khi chưa Crop.

Cảnh giác lừa đảo trực tuyến qua mạng xã hội caodem.com, Cách crop hình ảnh bằng css

Hình ảnh sau khi đã được crop.

Cảnh giác lừa đảo trực tuyến qua mạng xã hội caodem.com

Cách sử dụng thuốc tính object-fit để crop hình ảnh bằng css

Xem cấu trúc html.

<div class="demo">
<img title="hinh thu" src="/hinh-danh-thu.jpg" />
</div>

CSS thuộc tính object-fit để crop hình ảnh.

<style>
.demo img{
width:300px;
height:300px;
object-fit: cover;
object-position: 50% 50%; /* ngoài ra bạn có thể thêm cái này để xác định vị trí hình ảnh trong box */
}
</style>

Kết luận:

Với cách crop hình ảnh này, bạn có thể giúp cho hàng loạt những hình ảnh của mình có cùng một kích thước với nhau, mà không mất đi tính chân thực của hình ảnh.

139
Bài cùng chủ đề