Cách buộc một <img> để chiếm chiều rộng, ngay cả khi hình ảnh không được tải

Question

Tôi đang tải một loạt các img và tôi muốn chúng chiếm không gian trên tài liệu ngay cả khi chúng không được tải hoặc chưa tải xong.

Tôi đã cố chỉ định chiều rộng và chiều cao (cả thuộc tính và thuộc tính kiểu) và cảm thấy khó chịu khi hình ảnh không chiếm dung lượng nếu chúng không tải.

Chắc chắn, phải có cách để buộc img vào các thứ nguyên cụ thể, ** ngay cả khi hình ảnh đó không tải được.

Cảm ơn

Answer 1

Có chắc chắn là:

<img src="path/to/image.png" height="50" width="20" /> 

Ngoài ra, lý do xác định chiều rộng và chiều cao trong thuộc tính style="/* css */" đã không làm việc là vì hình ảnh này là, theo mặc định, in-line yếu tố . Bạn đã chỉ định display: block hình ảnh sẽ chấp nhận các giá trị width và height.

Nếu bạn thêm, đến css/phong cách:

display: inline-block; 

Nó sẽ làm việc. Tôi không chắc chắn lý do tại sao Firefox không tôn trọng thuộc tính chiều rộng/chiều cao, nhưng vẫn còn. Ngay cả IE, với một số doctype được xác định phải tôn trọng display: inline-block, vì mặc dù, img các thành phần, theo mặc định, trực tuyến.

Answer 2

Câu trả lời đơn giản: quấn hình ảnh trong một <div> với chiều rộng cố định.

<div style="width: 400px;"><img src="404.png" /></div> 

Nếu bạn đặt đệm, đường viền, v.v ... thành 0, bạn sẽ không nhận thấy div nằm ở đó.