cssresponsive-design

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?

Solution

  • 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