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

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/该列表放置在一个可变容器广告中，我认为这是解决此问题/解决方案的关键。

解决方案：这变成了Firefox问题。 任何有关如何修复的建议都受到欢迎...

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

在此处阅读更详细的内容： 在MDN上进行图像渲染