1

I am working on a responsive layout and I want my images to fill their containers. When I use max-width and no height there is some empty space near the bottom of the images.

Here is a fiddle: http://jsfiddle.net/8SvpQ/

Is what I am doing not possible to accomplish?

justinw
  • 3,856
  • 5
  • 26
  • 41

4 Answers4

2

I always use width:100%; with height:auto; and display:block;

img {
    max-width: 100%;
    margin: 0;
    padding: 0;
/* ADD THIS */
    width:100%;
    height:auto;
    display:block;
}

display:block; will remove some unwanted box-model spacing under the image

Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
  • Thanks Jason. Before you posted this I added `vertical-align: top` and it solved the problem as well. I will go with your suggestion but is either of the two 'better practice?' Thanks again. – justinw Apr 04 '14 at 20:16
  • I'm not sure what the "best practice" is, and I wouldn't know why `display:block;` wouldn't be. Technically you are changing the image from `display:inline;` to `block`. – Jason Lydon Apr 04 '14 at 21:51
1

just place and be happy =)

.img_h img{
    display: block;
}

Here an example : http://goo.gl/PqYIkN

I have helped

Carra
  • 31
  • 3
0

Make the image display: block or add vertical-align: bottom to it.

drip
  • 12,378
  • 2
  • 30
  • 49
0

What you are trying to do is possible. And it has been done on this page Make responsive image fit parent container. Hope this helps. please comment back if you do need help or tell me this is useful or not. thanks

Community
  • 1
  • 1
Mudassir
  • 1,136
  • 1
  • 11
  • 29