27

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?

Screenshot

brasofilo
  • 25,496
  • 15
  • 91
  • 179
user1403825
  • 309
  • 1
  • 4
  • 5

6 Answers6

38

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.

Brodie
  • 8,399
  • 8
  • 35
  • 55
7

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

img {
  vertical-align:middle;
}

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

Konstantin Barabator
  • 71
  • 1
  • 4
6

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

user2957214
  • 119
  • 2
  • 9
2

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).

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

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)

InspiredBy
  • 4,271
  • 6
  • 40
  • 67
  • I working on a responsive layout, so I whouldn't set a specifi height for the div; so that when the browser window is resized, the div scales. – user1403825 May 18 '12 at 16:52
0

The simple modern solution that works is as follows

div {
    display: flex;
}
madhu131313
  • 7,003
  • 7
  • 40
  • 53