Hiển thị hình ảnh theo đúng tỉ lệ với CSS3

Demo

Dưới đây là 3 tỉ lệ khác nhau của cùng một hình ảnh.

Tỉ lệ 16:9

Tỉ lệ 4:3

Tỉ lệ 1:1

Ví dụ khác, nhiều hình ảnh kích thước khác nhau với cùng 1 tỉ lệ (4:3).

CSS giữ đúng tỉ lệ hình ảnh

Dưới đây là ví dụ hiển thị ảnh theo các tỉ lệ phổ biến:

.image-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.image-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.image-1-1 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Lưu ý: object-fit bạn nên đặt là cover để hiển thị đúng tỉ lệ gốc của hình ảnh.

Cách dùng trong HTML

<img src="example.jpg" class="image-16-9" alt="Ảnh demo 16:9">

Bạn chỉ cần gán class tương ứng cho ảnh, là mọi ảnh sẽ được hiển thị đúng tỉ lệ như bạn mong muốn.

Khi nào nên dùng aspect-ratio?

• Khi bạn muốn đồng bộ hiển thị ảnh trong gallery
• Trong thumbnails bài viết
• Khi xây layout bằng CSS Grid hoặc Flexbox

Kết luận

Với aspect-ratio kết hợp object-fit, bạn không cần Crop ảnh thủ công hoặc dùng JavaScript xử lý phức tạp. Đây là cách nhẹ, chuẩn CSS3 để giữ hình ảnh đúng tỉ lệ, đồng bộ và đẹp mắt.

Chúc các bạn thành công!