如何防止流體容器中顯示的圖像被裁剪

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上進行圖像渲染