Chiều cao sai của trình bao bọc hình ảnh DIV với giá trị độ rộng phần trăm

Question

Tôi muốn bọc hình ảnh vào một html DIV và, vì tôi muốn điều này có thể mở rộng hoàn toàn với kích thước của cửa sổ, tôi muốn đặt chiều rộng của DIV tỷ lệ như sau:

html

<div id="wrapper"> 
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" /> 
</div> 

css

#wrapper { 
    position: absolute; 
    width: 50%; 
} 

#wrapper img { 
    width: 100%; 
} 

Hình ảnh phải xác định chiều cao của vùng chứa. Điều này là do chiều rộng hình ảnh được đặt thành 100% và chiều cao hình ảnh được tính toán phù hợp để duy trì tỷ lệ khung hình chính xác.

Kết quả là có thể nhìn thấy trên jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

Câu hỏi của tôi là:

1. Tại sao tất cả các trình duyệt hiện đại làm cho wrapper DIV 5px cao hơn hình ảnh bên trong?
2. Làm cách nào để thoát khỏi khoảng cách 5px này, trong khi vẫn đặt tất cả các kích thước theo phần trăm và mà không cần bằng javascript?

Đáng ngạc nhiên, điều này xảy ra trong Chrome (21.0.1180.89), Firefox (15.0.1) và IE8, trong khi IE7 hiển thị chính xác, phù hợp với chiều cao của DIV với chiều cao của hình ảnh.

Answer 1

OK, không quan trọng về, tôi tìm thấy một giải pháp tốt nhất:

#wrapper img { 
    display: block; 
    width: 100%; 
    border: 1px dashed red; 

}

Thay đổi từ hiển thị mặc định inline đến một màn hình block loại bỏ các vấn đề line-height đi thẳng.

Cách tiếp cận này cũng là ngữ nghĩa đúng vì trong trường hợp này những gì chúng ta thực sự muốn là một hình ảnh duy nhất được bọc trong một DIV mà không cần bất kỳ yếu tố khác trong nó, vì vậy các khái niệm về line-height cần phải được hoàn toàn bị xóa sổ khỏi bằng cách hiển thị hình ảnh như một khối.

Nó hoạt động trên tất cả các trình duyệt chính: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

Tôi nghĩ bạn đã thiết lập thuộc tính căn chỉnh để buộc trình duyệt hiển thị đúng thẻ img.

<div id="wrapper"> 
    <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /> 
</div> 

DEMO

Answer 3

................

Hi bây giờ thêm vertical-align:top trong img tag ném bạn css

như như

#wrapper img { 
    width: 100%; 
    border: 1px dashed red; 
    vertical-align:top; // add this line 
} 

live demo

Answer 4

Kiểm tra này này ra:

http://jsfiddle.net/5BN4g/29/

Đó là một vấn đề line-height :-)

Bạn cần:

#wrapper { 
    width: 60%; 
    background-color: #aaa; 
    margin: 50px auto; 
    line-height:0; 
} 

#wrapper img { 
    width:100%; 
    border: 1px dashed red; 
    box-sizing:border-box; 
} 
​ 

tôi đã sử dụng hộp kích thước để đảm bảo chiều rộng của hình ảnh không tràn container

Answer 5

Tôi nghĩ là vì nó không được xem như một Bảng

tôi đã thêm màn hình: bảng trong mã của bạn

Và có vẻ ổn rồi, kiểm tra liên kết

Example Display Table

Answer 6

vấn đề của bạn là một hình ảnh - thẻ <img>, để được chính xác - là một yếu tố nội tuyến. Tất cả những gì bạn cần làm là đặt display: block trên hình ảnh và phần đệm thừa sẽ biến mất. Demo.