Crop hình ảnh bằng CSS đơn giản và cần thiết

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.

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

<!-- Crop hình ảnh 300x300 -->
<div class="demo">
<img title="Hình ảnh" src="https://caodem.com/wp-content/uploads/matebook-d.jpg" />
</div>

Bên trên là nội dung HTML, hình ảnh được bao bọc bên ngoài bởi một thẻ div có class là demo

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

CSS crop hình ảnh, bạn có thể thay đổi độ rộng và chiều cao, cũng như vị trí căn ảnh trong thẻ