Wrong height of div with img tag inside

问题:

I have a div with an image tag inside, and the div height appears to be a little larger than the image.

I could fix this problem by setting a specific height for the div (the same as the image), but I'm working with a responsive layout, and I don't want to set a specific height for the div, so that when the browser window scales (for example in mobile devices) the div will scale and maintain the ratio.

I need that the div height to be exactly as the image height.

This is the scenario:

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

Css is:

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

Does anybody know how to fix this problem?

回答1:

The problem is that the image's natural styling gives it a little bit of margin on the bottom making it ugly to say the least. An easy fix is to just display: block, float: left on the image and the space should go away.

either that or you can play around w/ the border-collapsing on the image if you really don't want to float it. However, that's a solution that would probably cause more problems in the end.

so it's going to end up being something like

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

hope that helps.

回答2:

The easiest way is to determine the vertical alignment of the image.

img {
  vertical-align:middle;
}

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

回答3:

use img: block. that's all....

回答4:

To have the div be the same element as its child img element:

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

div img {
    margin: 0;
}

I'd suggest, though, that you use a span instead of a div (that way it'll automatically 'collapse' its width to that of its contents:

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

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

回答5:

Are you talking about just setting the size of the Div ? In css:

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

You can also not set the image in your code but set the "box's" DIV background image to that image instead:

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

(10px is just a random number ofcourse. Set it to whatever size you need)

回答6:

The simple modern solution that works is as follows

div {
    display: flex;
}