Thuộc tính object-fit: Resize ảnh/video vừa container
object-fit` xác định cách nội dung `` hoặc `
5 giá trị chính
| Giá trị | Hành vi | Tỷ lệ khung hình | Lấp đầy box |
|---|---|---|---|
fill (mặc định) | Kéo giãn vừa box | ❌ Bị méo | ✅ Luôn đầy |
contain | Co vừa box, giữ tỷ lệ | ✅ Giữ nguyên | ❌ Có letterbox (vùng trống) |
cover | Cover box, giữ tỷ lệ, crop | ✅ Giữ nguyên | ✅ Luôn đầy (crop) |
none | Giữ kích thước gốc | ✅ Giữ nguyên | ❌ Có thể tràn/ngắn |
scale-down | Min của `none` và `contain` | ✅ Giữ nguyên | ❌ Không phóng to |
Ví dụ: object-fit: cover (Phổ biến nhất cho avatar/thumbnail)
<!DOCTYPE html>
<html>
<head>
<style>
.myimg {
width: 250px;
height: 350px; /* Container chữ nhật */
object-fit: cover; /* Crop ảnh vừa khung, giữ tỷ lệ */
/* object-fit: fill; */ /* Méo ảnh vừa khung */
/* object-fit: contain; */ /* Toàn bộ ảnh hiện, có viền trống */
}
</style>
</head>
<body>
<h2>SWIFT</h2>
<img class="myimg"
src="course_67_image.png"
alt="Python Data Science"
width="300" height="200">
</body>
</html>Visual Comparison
/* Container: 200x200 vuông, Ảnh gốc: 400x100 (ngang) */
object-fit: fill; /* ████████████████ - méo dẹt */
object-fit: contain; /* ░░████████████░░ - letterbox top/bottom */
object-fit: cover; /* ████████████████ - crop hai bên, full */
object-fit: none; /* ████████████████░░░░░░░░░░ - tràn ra ngoài */
object-fit: scale-down;/* ░░████████████░░ - như contain nhưng không phóng to ảnh nhỏ */
Kết hợp object-position
Khi dùng `cover`/`none`, dùng `object-position` chọn vùng hiển thị:
.avatar {
width: 100px; height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: top center; /* Ưu tiên mặt (thường ở trên) */
}
/* Giá trị: top, bottom, left, right, center, 50% 50%, 10px 20px */
Ứng dụng thực tế
- Avatar/Profile: `object-fit: cover` + `border-radius: 50%` + `object-position: top center`.
- Hero banner: `object-fit: cover` + `object-position: center 30%` (focus người).
- Product gallery: `object-fit: contain` + background color nhất quán.
- Video: `object-fit: contain` (mặc định video thường cover).
Lưu ý
- Chỉ hoạt động trên **replaced elements**: `
`, `