Hình ảnh mà thành phần không thể thiếu trong một trang web., để thêm một hình ảnh, người ta có rất nhiều cách, nhưng chủ yếu là sử dụng HTML tag <img>. Sau đây là những điều bạn cần biết vể thẻ <img>
Mục lục
<img> là thẻ đơn
Điều này có nghĩa là khi sử dụng thẻ <img>, chúng ta không cần đóng tag như thế này
</img>Đơn giản chỉ cần như thế này thôi
<img src="abc.png" alt=""><img> có hai attributes chính
Thẻ <img> có nhiều attributes nhưng có hai attribute chính bắt buộc phải có. Đó làm src và alt
- src: dùng để định nghĩa đường dẫn đến file hình ảnh (png, jpg, gif….). Nếu đường sai hoặc tên file bị sai, ảnh sẽ không hiển thị
- alt: là dòng chữ thay thế sẽ được hiển thị khi ảnh không hiển thị được. Alt nên thể hiện được nội dung của hình ảnh hay nội dung của văn bản liên quan tới hình ảnh đó
Các định dạng hình ảnh thường dùng
Thường các coder sử dụng hai định dạng hình ảnh chính là PNG và JPG. PNG thường được sử dụng cho các hình ảnh kiểu illust như logo, tranh vẽ, sơ đồ, vector, JPG được sử dụng cho ảnh dạng phong cảnh, hình chụp, chân dung.
Ngoài ra, định dạng GIF cho hình ảnh động và SVG cho ảnh vector, không lo bị vỡ hình nếu phóng to.
Định dạng ảnh mới hiện nay là WEBP, một định dạng mới do Google phát triển với nhiều ưu việt hơn các định dạng cũ như nhẹ, hiệu suất cao… Tuy nhiên, phần lớn các trình duyệt đã hỗ trợ nhưng không phải tất cả
Lưu ý nhỏ về thẻ <img>
Bạn nên thêm attribute width và height cho <img> vì bạn sẽ tránh được hình ảnh sẽ nhấp nháy khi hình ảnh đang được load
<img src="abc.gif" alt="" width="42" height="42">Thẻ <img> có CSS mặc định là
img {
display: inline-block;
}Vì vậy, bạn có thể canh giữa cho hình ảnh bằng đơn giản bằng CSS text-align: center
<div class="wrapper-img">
<img src="img-1"/>
</div>
<style>
.wrapper-img {
text-align: center;
}
</style>CSS cho hình ảnh responsive
Nếu bạn lo lắng hình ảnh sẽ quá lớn so với chiều rộng của trình duyệt, CSS sau đây sẽ thu nhỏ hình ảnh đúng tỉ lệ và rộng bằng wrapper của hình ảnh đó. Code này mình học hỏi từ Bootstrap 5
max-width: 100%;
height: auto;Để nói thêm về <img> thì vẫn còn rất nhiều điều thú vị bạn có thể tìm hiểu. Mình sẽ giới thiệu với các bạn nhiều hơn ở các bài viết sau. Chúc các bạn vui vẻ.