0

When you have images with

width: 100%;
height: auto;

contained in a box, depending on the aspect ratio(I think) of the image and the dimensions of the box it will not always populate the entire height of the box.

You don't really notice this when there is just one row of these images side by side but if they go onto a new row you can see a few pixels space between the top and bottom row. The boxes are touching but the images in the box are not taking up all of the height of the box.

I can't set a fixed height and width on these boxes/images as they are supposed to be fluid.

I'd like to get a solution to this without Javascript if possible but if that's the only solution I will take it.

JSFIDDLE

http://jsfiddle.net/BeYqu/

ibanore
  • 1,500
  • 1
  • 12
  • 25
  • if you want the image to take the whole space of the containing div, use it as a background image and not inline image, and then use -> background-size:cover – webkit Jul 15 '14 at 09:43
  • I would prefer to use in this instance as the images will be changed a lot and the code copied and pasted so I don't want to have to keep changing CSS for each new image. – ibanore Jul 15 '14 at 09:54

1 Answers1

3

You can set display:block to images

img {
    width: 100%;
    height: auto;
    display:block; /* add this */
}

Hope you need this.

Demo

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68