Thẻ <img>

Việc đặt thuộc tính width và height trên thẻ <img> giúp ngăn ngừa việc thay đổi bố cục. Thông tin này cho phép trình duyệt đặt trước lượng dung lượng chính xác cho hình ảnh.

  • Đặt thuộc tính width và height: Giá trị của các thuộc tính này phải được đặt cho phù hợp với kích thước của chính hình ảnh (tức là kích thước hàm nội tại) thay vì kích thước mà hình ảnh sẽ hiển thị.

  • Điều chỉnh kiểu hình ảnh nếu cần: Tuỳ thuộc vào kiểu hiện có của hình ảnh, việc thêm các thuộc tính width và height có thể khiến hình ảnh hiển thị khác nhau. Trong nhiều trường hợp, bạn có thể khắc phục vấn đề này bằng cách thêm height: auto hoặc width: auto vào kiểu hiện có.

Kiểu CSS trước Đổi thành
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">