Tổng quan CSS object-fit Property
object-fit chỉ định cách **replaced element** (`
`, `
5 giá trị chuẩn
| Giá trị | Mô tả | Giữ aspect ratio | Fill box |
fill | Kéo giãn không giữ tỷ lệ | ❌ | ✅ |
contain | Thu nhỏ/vừa khung, giữ tỷ lệ | ✅ | ❌ (letterbox) |
cover | Phủ kín khung, giữ tỷ lệ, crop | ✅ | ✅ |
none | Giữ kích thước nội tại | ✅ | ❌ |
scale-down | Nhỏ hơn giữa none và contain | ✅ | ❌ |
Ví dụ: object-fit: cover (Best cho avatar/thumbnail)
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px;
object-fit: cover; /* Crop ảnh vừa khung chữ nhật 250x350 */
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class="myimg"
src="course_67_image.png"
alt="Python Data Science"
width="300" height="200">
</body>
</html>
object-fit + object-position = Điều khiển hoàn toàn
.thumbnail {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center center; /* Mặc định */
/* object-position: top center; Fokus phần trên */
/* object-position: 10% 50%; Tùy chỉnh pixel/% */
}
So sánh: object-fit vs background-size
| Đặc điểm | object-fit (img/video) | background-size (background-image) |
| HTML Element | ` `, ` | Mọi element (qua CSS) |
| Semantic | ✅ Accessible (alt, caption) | ❌ Decorative only |
| SEO | ✅ Indexable | ❌ Không index |
| Right-click save | ✅ Dễ dàng | ❌ Khó khăn |
| Print | ✅ In được | Thường không in |
| Loading control | ✅ `loading="lazy"`, `decoding="async"` | ❌ Không kiểm soát |
Best Practice: Luôn dùng <img> + object-fit cho content images
<!-- Tốt: Semantic, SEO, Accessible, Controllable -->
<img src="hero.jpg" alt="Team meeting" style="width: 100%; height: 400px; object-fit: cover; object-position: center 30%;" loading="lazy">
<!-- Tránh: background-image cho content -->
<div style="background: url(hero.jpg); background-size: cover; height: 400px;"></div>
Lưu ý
- Cần `width` và `height` (hoặc `aspect-ratio`) trên element.
- `object-fit` không ảnh hưởng `box-sizing` (content-box vs border-box).
- Kết hợp `border-radius` trên element (không phải pseudo) cho bo góc crop đúng.