How to prevent image in fluid container displayed cropped

Question

Please take a look of the following code and result.

html:

<div id="social_media">
    <ul class="social">
        <li><a href="#"><img src="facebook.png"></a></li>
        <li><a href="#"><img src="twitter.png"></a></li>
        <li><a href="#"><img src="gplus.png"></a></li>
        <li><a href="#"><img src="linkedin.png"></a></li>
    </ul>
</div>

css:

#social_media {
    width:70%;
    float: left;
    text-align:center;
}

ul.social{
    margin: 0; padding: 0;
    list-style-type: none;
}
ul.social li{
    width: 14%;
    margin: 0 5.5%;
    display: inline-block;
    float: left;
    text-align: center;
}

result:

Is it possible to keep this fluid layout, but prevent images displayed like that. You'll notice that the bottom edges of the images is displayed as if it's cropped. The second and third images get cropped on the right side too.

UPDATE: Please take a look of the live example http://jsfiddle.net/ktsixit/bcceC/embedded/result/ The list is placed in a fluid container ad I think that's the key to this isuue/solution.

SOLUTION: This turn to be a firefox issue. Any suggestions about how to fix that are welcomed...

Answer 1

ul.social{
    margin: 0; padding: 0;
    list-style-type: none;
}
ul.social li{
    width: 14%;
    margin: 0 5.5%;
    display: inline-block;
    float: left;
    text-align: center;
}

ul.social li img {
    width: 100%;
    height: auto;
}

I believe you need to tell your images to fit the width of their parent. As at the moment the image appears too large for it's parent container, therefore cannot be shown fully. This should fix your issue and ensure that the images will fit the container when going down to smaller screens etc.

Answer 2

Sometimes this is simply how images get scaled down by browsers. Did you make sure that your image files are not broken or something?

Anyway, there is an experimental specification called image-rendering which only works in the latest browser version except IE. I can't recommend using this, but want to keep this option open for you.

img[src$=".gif"], img[src$=".png"] {
   image-rendering: -moz-crisp-edges;         /* Firefox */
   image-rendering:   -o-crisp-edges;         /* Opera */
   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

Read a more detailed text here: image-rendering on MDN