Có nhiều cách cắt ảnh trong CSS, nhưng đơn giản và hiệu quả nhất là 3 phương pháp sau:
1. Sử dụng object-fit
object-fit: cover cho phép cắt ảnh dễ dàng đồng thời giữ tỷ lệ khung hình (aspect ratio).
Kết hợp object-fit với object-position để kiểm soát vùng hiển thị. Ví dụ: object-fit: none; object-position: 50% 50% sẽ căn giữa ảnh trong container. Giá trị đầu tiên là khoảng cách từ trái, giá trị thứ hai từ trên.
2. Sử dụng background-image
Đặt background-image: url(...) cho <div> container, kèm background-size: cover để cắt và giữ tỷ lệ. background-position mặc định là top left.
Lưu ý: Background-image không được screen reader đọc → vấn đề truy cập (accessibility). Nếu ảnh quan trọng, hãy mô tả nội dung ảnh trên trang hoặc chọn phương pháp khác.
3. Sử dụng width, height, margin và overflow
Trên container của <img> (thường là <div>):
position: relative— tạo "hàng rào" giới hạn.overflow: hidden— ẩn phần vượt ra ngoài hàng rào.
Sau đó điều chỉnh margin âm hoặc width lớn hơn container để chọn vùng hiển thị mong muốn.
Ví dụ minh họa các kỹ thuật cắt
/* Container chung */
div > div {
max-width: 500px; width: 100%;
position: relative; overflow: hidden;
}
img { width: 100%; }
/* Cắt trên */
.crop-top img { margin: -20% auto 0; }
/* Cắt dưới */
.crop-bottom img { margin: 0 auto -20%; }
/* Cắt trên và dưới */
.crop-vertically img { margin: -20% auto -20%; }
/* Cắt phải */
.crop-right img { width: 120%; margin: 0 -20% 0 0; }
/* Cắt trái */
.crop-left img { width: 120%; margin: 0 0 0 -20%; }
/* Cắt trái và phải */
.crop-horizontally img { width: 180%; margin: 0 -20% 0; height: 500px; }
/* Cắt vuông (dùng object-fit) */
.crop-square img { width: 100%; object-fit: cover; aspect-ratio: 1/1; }
Quan sát class name trong HTML và CSS tương ứng để hiểu cách margin điều khiển vùng hiển thị.
Kết luận
Ba phương pháp chính: object-fit (hiện đại, giữ tỷ lệ), background-image (dễ dàng nhưng kém accessibility), và overflow:hidden + margin (linh hoạt, tương thích rộng). Chọn phương pháp phù hợp với yêu cầu dự án.