object-fit: Làm vừa ảnh/video vào khung container
Thuộc tính object-fit kiểm soát cách nội dung replaced element (``, `
Ví dụ: object-fit: fill
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px;
object-fit: fill; /* Kéo giãn méo ảnh để đầy khung */
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class="myimg"
src="course_67_image.png"
alt="Python Data Science"
width="300" height="200">
</body>
</html>
So sánh 5 giá trị (Visual)
/* Container: 200x200 vuông | Ảnh gốc: 400x100 (ngang 4:1) */
fill: ████████████ (méo dẹt, đầy khung)
contain: ░░████████░░ (giữ tỷ lệ, letterbox top/bottom)
cover: ████████████ (giữ tỷ lệ, crop left/right, đầy khung)
none: ████████░░░░ (kích thước gốc, tràn ra ngoài)
scale-down: ░░████████░░ (giống contain, nhưng không phóng to ảnh nhỏ)
Khi nào dùng giá trị nào?
| Giá trị | Use Case |
|---|---|
cover | Avatar, thumbnail, hero banner, background-like - **Phổ biến nhất** |
contain | Product photo, artwork, logo - cần thấy toàn bộ |
fill | Ít dùng (méo ảnh) - trừ khi ý đồ nghệ thuật |
none | Pixel art, icon sprite, giữ pixel perfect |
scale-down | Ảnh nhỏ trong container lớn, không muốn phóng to |
Kết hợp object-position (Quan trọng cho cover)
.hero-image {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center 30%; /* Focus 30% từ trên xuống (mặt người) */
}
.avatar {
width: 100px; height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: top center; /* Khuôn mặt thường ở trên */
}
Responsive Video với object-fit
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: contain; /* Video thường giữ tỷ lệ, contain an toàn */
}
Lưu ý
- Phải set `width` và `height` (hoặc `aspect-ratio`) trên element để `object-fit` có box tham chiếu.
- Khác với `background-size`: `object-fit` cho element, `background-size` cho background-image.
- `object-fit: cover` + `border-radius` = hình ảnh bo góc/tron crop đúng.