Khi xây dựng website, việc hiển thị ảnh đúng kích thước là rất quan trọng để đảm bảo giao diện đẹp mắt và tốc độ tải nhanh. Trong HTML, bạn có thể dễ dàng chỉnh kích thước ảnh (resize image) bằng nhiều cách khác nhau: dùng thuộc tính HTML, CSS, hoặc phản hồi tự động (responsive). Tuy nhiên mình sẽ hướng dẫn mọi người một cách dễ dàng nhất để ngay cả người mới cũng dễ làm nhé.
Bài viết này sẽ hướng dẫn chi tiết từng cách chỉnh kích thước ảnh trong HTML kèm ví dụ minh họa.
1. Hướng dẫn chỉnh kích thước ảnh HTML
* Cách 1: Sử Dụng Thuộc Tính Width Và Height Trong Thẻ <img>
Đây là cách cơ bản và nhanh nhất để thay đổi kích thước ảnh trong HTML. Cú pháp cơ bản của chúng ta là:
📍 Giải thích:
- Src: đường dẫn đến hình ảnh
- Width: chiều rộng (tính bằng pixel hoặc %)
- Height: chiều cao (tính bằng pixel hoặc %)
- Alt: mô tả hình ảnh (phục vụ SEO và trình đọc màn hình)
Ví dụ thực tế:
<img src=”banner.jpg” width=”600″ height=”300″ alt=”Banner chính của website”>
Lưu ý: Nếu chỉ đặt width mà bỏ height, trình duyệt sẽ tự động giữ tỷ lệ gốc của ảnh – giúp ảnh không bị méo
* Cách 2: Chỉnh Kích Thước Ảnh Bằng CSS
Cách này linh hoạt hơn, đặc biệt hữu ích khi muốn tùy chỉnh nhiều ảnh cùng lúc hoặc áp dụng phong cách riêng.
– Phương pháp 1: Dùng thuộc tính nội tuyến (inline CSS)
<img src=”logo.png” style=”width:150px; height:auto;” alt=”Logo website”>
Trong đó:
- width:150px; >> đặt chiều rộng ảnh
- height:auto; >> tự động co giãn chiều cao theo tỷ lệ gốc
– Phương pháp 2: Dùng CSS riêng trong file .css
img.banner { width: 100%; height: auto; }
💡 Ưu điểm: Gọn gàng, dễ bảo trì, và có thể áp dụng cho nhiều ảnh chỉ bằng 1 class CSS.
* Cách 3: Chỉnh Ảnh Responsive (Tự Động Căn Theo Màn Hình)
Để ảnh hiển thị đẹp trên mọi thiết bị (PC, tablet, mobile), bạn nên dùng CSS responsive.
Ví dụ:
img {
max-width: 100%;
height: auto;
display: block;
}
– Giải thích:
- max-width: 100%; → ảnh không vượt quá khung chứa
- height: auto; > giữ tỷ lệ chuẩn
- display: block; > giúp ảnh căn chỉnh dễ dàng hơn
Khi người dùng xem trên điện thoại, ảnh sẽ tự động co nhỏ lại theo kích thước màn hình.
Cách 4. Chỉnh Kích Thước Ảnh Bằng Thẻ <picture> (Nâng Cao)
Khi bạn cần hiển thị ảnh khác nhau cho từng kích thước màn hình, có thể dùng thẻ <picture>.
Ví dụ:
<picture>
<source media=”(max-width: 768px)” srcset=”banner-mobile.jpg”>
<source media=”(min-width: 769px)” srcset=”banner-desktop.jpg”>
<img src=”banner-desktop.jpg” alt=”Banner website”>
</picture>
👉 Khi truy cập bằng điện thoại, trình duyệt sẽ tự động hiển thị banner-mobile.jpg để tiết kiệm dung lượng.
2. Một số lưu ý và câu hỏi thường gặp?
- Nên giảm kích thước file ảnh trước khi tải lên (dưới 200KB).
- Dùng định dạng ảnh hiện đại như WebP để tăng tốc độ tải trang.
- Tránh kéo giãn ảnh vượt quá kích thước gốc → ảnh bị vỡ, mờ.
- Có thể kết hợp HTML + CSS để kiểm soát ảnh chính xác hơn.
