CODEWITHSUNDEEP
cssresponsive-design
justinw
justinw

Reputation: 3966

Empty Space when image has max-width:100% - responsive

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?

Upvotes: 1

Views: 2629

Answers (4)

Carra
Carra

Reputation: 31

just place and be happy =)

.img_h img{
    display: block;
}

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

I have helped

Upvotes: 1

Mudassir
Mudassir

Reputation: 1156

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

Upvotes: 0

Jason Lydon
Jason Lydon

Reputation: 7180

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

Upvotes: 2

drip
drip

Reputation: 12943

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

Upvotes: 0

Related Questions