如何防止液体容器中的图像显示裁剪

Question

请查看以下代码和结果。

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;
}

结果：

是否可以保持这种流畅的布局，但防止显示这样的图像。您会注意到图像的下边缘显示为被裁剪。第二张和第三张图片也会在右侧裁剪。

更新 请看一下实例 http://jsfiddle.net/ktsixit/bcceC/embedded/result/ 该列表放在一个流体容器中，我认为这是这个isuue / solution的关键。

解： 这转变为火狐问题。任何关于如何解决这个问题的建议都欢迎......

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;
}

我相信您需要告诉您的图片符合其父级的宽度。由于图像对于它的父容器而言显得太大，因此无法完全显示。这应该可以解决您的问题，并确保在向下移动到较小的屏幕等时图像将适合容器。

Answer 2

有时，这只是图像按浏览器缩小的方式。你确定你的图像文件没有损坏吗？

无论如何，有一个名为image-rendering的实验规范，只适用于IE以外的最新浏览器版本。我不建议使用此功能，但希望保持此选项为您打开。

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) */
}

在此处阅读更详细的文字：image-rendering on MDN