Hãy tấm ảnh tôn trọng kích thước CSS

Question

Tôi kẹp kích thước hình ảnh với CSS:

#somewhere img { 
    width: 160px; 
    height: 90px; 
} 

Khi tất cả hình ảnh tải đúng cách, bố cục trang web của tôi có vẻ tốt. Mặt khác, nếu bất kỳ hình ảnh cụ thể nào không tải, bố cục trang của tôi bị thay đổi vì hình ảnh bị hỏng sẽ chiếm 0px x 0px. Các yếu tố xung quanh hình ảnh bị vỡ sẽ nhô lên trên. Làm thế nào để làm cho hình ảnh bị hỏng vẫn tôn trọng kích thước CSS để bố cục của tôi không sụp đổ?

Answer 1

Thêm display: block-img nên đủ tốt:

#somewhere img { 
    width: 160px; 
    height: 90px; 
    display: block; 
} 

---

Nếu cách nào đó không hoạt động thì hãy bọc ping img trong phần tử khác sẽ hoạt động.

<span><img class="channelLogoImg" width="160" height="90" src="" /></span> 

#somewhere span, #somewhere img { 
    width: 160px; 
    height: 90px; 
    display: block; 
} 

Tôi đã chọn span vì đó là lựa chọn thông thường cho trình bao bọc phù phiếm.

Answer 2

Tôi biết đây không phải là một giải pháp CSS nhưng tôi sẽ luôn luôn xác định chiều rộng và các thuộc tính chiều cao của thẻ hình ảnh chứ không phải trong CSS - điều này sẽ giải quyết vấn đề của bạn nghiến răng cho thiếu hình ảnh.

Answer 3

Tùy thuộc vào cách bố trí của bạn, có lẽ bạn có thể thêm CSS tài sản

display: [block/inline-block] 

để "img" tag.

Hoặc bạn có thể làm cho div/span wrapper xung quanh hình ảnh và cung cấp cho họ chiều cao cố định và chiều rộng như:

<div style="height:90px; width:160px"> 
    <img src="foo.jpg" /> 
</div> 

Hope this helps