Hình ảnh đẹp và đúng tỉ lệ làm trang web chuyên nghiệp hơn. Bài này học cách định dạng ảnh co giãn, cắt ảnh bằng object-fit, bộ lọc, khung ảnh, hiệu ứng khi rê chuột, lưới ảnh và ảnh nền tối ưu.
Bạn sẽ học được
- Làm ảnh co giãn, giữ tỉ lệ
- Cắt ảnh vừa khung với object-fit, object-position
- Dùng filter, mix-blend-mode, clip-path
- Tạo thư viện ảnh và hiệu ứng hover
Một số khái niệm
| Thuộc tính | Tác dụng |
|---|---|
| max-width: 100%; height: auto | Ảnh không tràn khung, giữ tỉ lệ |
| aspect-ratio | Khung tỉ lệ cố định: 1, 4/3, 16/9 |
| object-fit: cover | contain | Lấp đầy khung (cắt bớt) / vừa khung (có viền trống) |
| object-position | Chọn phần ảnh giữ lại khi cắt |
| filter | grayscale, blur, brightness, contrast, sepia, drop-shadow |
| clip-path | Cắt theo hình: circle, polygon |
| mix-blend-mode | Hòa trộn màu với nền |
object-fit
<style>
.k { width: 150px; height: 100px; border: 2px solid #90a4ae; border-radius: 8px; margin: 4px; }
.f1 { object-fit: fill; } .f2 { object-fit: cover; } .f3 { object-fit: contain; background: #eceff1; } .f4 { object-fit: cover; object-position: top; }
figure { display: inline-block; margin: 0; text-align: center; font-size: 12px; }
</style>
<figure><img class="k f1" src="https://picsum.photos/seed/ruong/300/400" alt=""><figcaption>fill (méo)</figcaption></figure>
<figure><img class="k f2" src="https://picsum.photos/seed/ruong/300/400" alt=""><figcaption>cover</figcaption></figure>
<figure><img class="k f3" src="https://picsum.photos/seed/ruong/300/400" alt=""><figcaption>contain</figcaption></figure>
<figure><img class="k f4" src="https://picsum.photos/seed/ruong/300/400" alt=""><figcaption>cover + top</figcaption></figure>Kết quả hiển thị
Bộ lọc và cắt hình
<style>
.a { width: 110px; height: 110px; object-fit: cover; margin: 4px; border-radius: 8px; transition: .3s; }
.x1 { filter: grayscale(1); } .x1:hover { filter: none; }
.x2 { filter: blur(2px) brightness(1.1); }
.x3 { filter: sepia(.8) contrast(1.1); }
.x4 { clip-path: circle(50%); }
.x5 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
</style>
<img class="a x1" src="https://picsum.photos/seed/hoaban/220/220" alt="" title="Rê chuột">
<img class="a x2" src="https://picsum.photos/seed/hoaban/220/220" alt="">
<img class="a x3" src="https://picsum.photos/seed/hoaban/220/220" alt="">
<img class="a x4" src="https://picsum.photos/seed/hoaban/220/220" alt="">
<img class="a x5" src="https://picsum.photos/seed/hoaban/220/220" alt="">Kết quả hiển thị
Thư viện ảnh với hiệu ứng
<style>
.tv { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tv a { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 1; }
.tv img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.tv a:hover img { transform: scale(1.1); }
.tv span { position: absolute; inset: auto 0 0; padding: 6px 8px; color: #fff; font-size: 12px; background: linear-gradient(transparent, rgb(0 0 0 / .7)); opacity: 0; transition: .3s; }
.tv a:hover span { opacity: 1; }
</style>
<div class="tv">
<a href="#"><img src="https://picsum.photos/seed/a1/300" alt="Ảnh 1"><span>Mộc Châu</span></a>
<a href="#"><img src="https://picsum.photos/seed/a2/300" alt="Ảnh 2"><span>Tà Xùa</span></a>
<a href="#"><img src="https://picsum.photos/seed/a3/300" alt="Ảnh 3"><span>Điện Biên</span></a>
<a href="#"><img src="https://picsum.photos/seed/a4/300" alt="Ảnh 4"><span>Sơn La</span></a>
</div>Kết quả hiển thị
Mẹo hay
Video và iframe co giãn: width: 100%; aspect-ratio: 16 / 9; height: auto; thay cho mẹo padding-top 56.25% cũ.
Lưu ý
Ảnh quá nặng là nguyên nhân số 1 làm trang chậm; nén sang WebP/AVIF, đặt width/height trong HTML và loading="lazy" cho ảnh bên dưới màn hình đầu.
Thực hành
- Làm ảnh đại diện tròn từ ảnh chữ nhật bằng object-fit.
- Lưới 8 ảnh vuông, hover phóng to và hiện chú thích.
- Ảnh đen trắng chuyển màu khi rê chuột.
- Ảnh bìa bài viết tỉ lệ 16/9 co giãn mọi màn hình.
Tóm tắt bài học
- max-width: 100% + height: auto cho ảnh co giãn.
- object-fit cover/contain, object-position.
- filter, clip-path, mix-blend-mode tạo hiệu ứng.
- Grid + overflow + transform cho thư viện ảnh.