Chiều cao sai của div với thẻ img bên trong

Question

Tôi có thẻ div có thẻ hình ảnh bên trong và chiều cao div dường như lớn hơn một chút so với hình ảnh.

Tôi có thể khắc phục sự cố này bằng cách đặt chiều cao cụ thể cho div (giống như hình ảnh), nhưng tôi đang làm việc với bố cục đáp ứng và tôi không muốn đặt chiều cao cụ thể cho div, do đó khi cửa sổ trình duyệt tỷ lệ (ví dụ trong thiết bị di động) div sẽ mở rộng và duy trì tỷ lệ.

Tôi cần chiều cao div chính xác như chiều cao hình ảnh.

Đây là kịch bản:

<div class='box'><img src='image.jpg'></div>

Css là:

img { height: auto; max-width: 100%; width: auto; }

Có ai biết làm thế nào để khắc phục vấn đề này?

Answer 1

Bạn đang nói về việc chỉ thiết lập kích thước của Div? Trong css:

.box 
{ 
height: 10px; 
width:10px; 
} 

Bạn cũng có thể không được thiết lập hình ảnh trong mã của bạn nhưng thiết lập hình nền DIV "hộp" để hình ảnh mà thay vào đó:

.box 
{ 
height: 10px; 
width:10px; 
background:url('/imgURL/filename.gif') white no-repeat; 
} 

(10px chỉ là một số ngẫu nhiên ofcourse . Đặt nó vào bất cứ kích thước bạn cần)

Answer 2

để có div là yếu tố tương tự như phần tử con img của nó:

div { 
    display: inline-block; 
    padding: 0; 
} 

div img { 
    margin: 0; 
} 

tôi muốn đề nghị, mặc dù, rằng bạn sử dụng một span thay vì một (cách mà div sách sẽ tự động 'sụp đổ' chiều rộng của nó để mà nội dung của nó:

span { 
    padding: 0; 
} 
span img { 
    margin: 0; 
} 

JS Fiddle proof-of-concept (for both).

Answer 3

Vấn đề là kiểu dáng tự nhiên của hình ảnh mang lại cho nó một chút lợi nhuận ở phía dưới làm cho nó xấu xí để nói rằng ít nhất. Một sửa chữa dễ dàng là chỉ cần hiển thị: khối, phao: trái trên hình ảnh và không gian sẽ biến mất.

hoặc là bạn hoặc bạn có thể chơi xung quanh w/sự sụp đổ đường viền trên hình ảnh nếu bạn thực sự không muốn nổi nó. Tuy nhiên, đó là một giải pháp mà có lẽ sẽ gây ra nhiều vấn đề hơn ở cuối.

vì vậy nó sẽ kết thúc được một cái gì đó giống như

.box img { 
    display: block; /*inline block would be fine too*/ 
    float: left; 
} 

hy vọng rằng sẽ giúp.

Answer 4

sử dụng img: block. đó là tất cả ....

Answer 5

Cách dễ nhất là xác định căn chỉnh của hình ảnh.

img { 
    vertical-align:middle; 
} 

http://jsbin.com/xozatu/edit?html,css,output

Answer 6

Các giải pháp hiện đại đơn giản mà làm việc như sau

div { 
    display: flex; 
}