Bạn sẽ làm ảnh trong các card có tỷ lệ nhất quán mà không bị méo, đồng thời giữ ảnh trong bài viết có thể hiện đủ nội dung. Hai tình huống này cần lựa chọn khác nhau.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Ảnh có kích thước riêng trước khi có CSS

Ảnh có tỷ lệ và kích thước nội tại. Nếu đặt cả width và height không cùng tỷ lệ mà không có cách fit phù hợp, hình có thể bị kéo méo. Một ảnh rộng trong HTML cũng có thể làm trang tràn khi chưa giới hạn bằng CSS.

Quy tắc max-width:100%;height:auto thường là nền tảng tốt cho ảnh nội dung. Nó cho ảnh co lại theo vùng chứa nhưng không yêu cầu tất cả ảnh phải kéo rộng tới cùng kích thước.

Card và hình sơ đồ không có cùng mục tiêu

Card bài viết thường cần một khung ảnh đồng đều để danh sách gọn. object-fit:cover cho phép ảnh lấp khung nhưng có thể cắt. Với sơ đồ chứa chữ hoặc ảnh hướng dẫn cần thấy trọn nội dung, hãy dùng tỷ lệ tự nhiên hoặc contain khi phù hợp.

object-position chọn vùng ưu tiên bên trong khung ảnh. Nó không làm phần đã bị cắt trở nên hiện đủ. Nếu hình quan trọng bị mất nội dung, đổi cách trình bày chứ không chỉ di chuyển vị trí cắt cho một kích thước màn hình.

Aspect-ratio và không gian dự trù

aspect-ratio có thể giữ tỷ lệ hộp trước hoặc trong khi nội dung được bố trí. Width/height trên img trong HTML cũng giúp trình duyệt biết tỷ lệ để dự trù chỗ. Những cơ chế này hỗ trợ giảm dịch chuyển, không thay thế việc tải đúng tệp và tối ưu kích thước ảnh.

Không phải lúc nào cũng cần ép height cố định. Một hình sơ đồ trong bài có thể cao theo nội dung, còn ảnh trang trí trong card có thể dùng khung 16/9.

Kiểm tra với ảnh thật và tiêu đề dài

Đặt một card có tiêu đề dài và một card có mô tả ngắn để quan sát. Đừng chỉ kiểm tra ba card có nội dung bằng nhau rồi kết luận bố cục đã ổn. Cách làm hàng/cột thống nhất sẽ rõ hơn trong phần Flexbox và Grid.

Bộ ví dụ dùng ảnh sơ đồ tự tạo; trong card nó được dùng để minh họa cách fit, còn trong trang bài viết ảnh giữ tỷ lệ tự nhiên. Khi thay bằng ảnh thực tế, hãy kiểm tra cả ý nghĩa alt lẫn vùng bị cắt.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<figure class="image-sample"><img src="images/web.png" alt="Ba trang có thể điều hướng qua menu" width="960" height="480"><figcaption>Ảnh sơ đồ trong bài giữ toàn bộ nội dung.</figcaption></figure>

Thêm hoặc sửa trong styles.css

img { max-width: 100%; height: auto; }
.card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .5rem; }
.image-sample { max-width: 32rem; margin: 0; }
.image-sample img { display: block; width: 100%; height: auto; }
.image-sample figcaption { color: #425a73; font-size: .9rem; }

So sánh trước và sau

Ảnh card dùng khung 16/9, còn ảnh sơ đồ trong phần mẫu giữ tỷ lệ tự nhiên 2/1. So sánh để thấy cover có thể cắt chứ không làm ảnh méo.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Dùng cover cho ảnh tài liệu rồi mất chữ: giữ tỷ lệ tự nhiên hoặc chọn contain.
• Đặt width và height tùy ý: kiểm tra tỷ lệ và fit.
• Nghĩ CSS thay thế alt: alt vẫn thuộc nội dung HTML.

Tự kiểm tra

• Đổi object-fit thành contain và xem khoảng trống.
• Thay một tiêu đề card bằng câu dài hơn để tìm giới hạn bố cục.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML