如何使用內部圖像按比例調整div的大小

Question

好，所以我有一個全屏背景圖片，該圖片通過Flash上​​傳

flash {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }

它的大小調整得很完美，我在div的底部還有一個頁腳，其中有5張圖像。 我將所有圖像對齊成一行，但是隨着瀏覽器調整圖像大小，圖像會跳起來，而不是按比例調整大小。 非常感謝您的建議。 這是jsFiddle的鏈接http://jsfiddle.net/eglemei/LqBzY/

Answer 1

您的圖片沒有調整大小，因為您沒有告訴他們調整大小。 比例調整大小不是默認行為。 如果圖像以百分比形式給出width或height值，則圖像將僅根據其包含的元素調整其大小。

指定height或width百分比后，圖像將根據最近的父元素縮放，並帶有一個明確設置的position屬性（在您的情況下為'div＃footer'。如果您設置了百分比width ，則按只要您未在其他位置指定height ，圖像就會保持其縱橫比。

將圖像的CSS更改為如下所示：

#sponsors img {
    margin-right: 3%; 
    width:16%;
}

您還需要從每個img標簽中刪除height="100px" ，否則img將使用該高度。

我已經相應地更新了您的jsFiddle： http : //jsfiddle.net/LqBzY/5/