匹配高度與100％寬度

我正在向投資組合網站添加一些圖像，但想要使用背景圖像來抵制img屬性。該網站的響應速度非常快，並使用百分比作爲基本結構。我使用background-img屬性並將容器的寬度設置爲其父項的100％。添加設置高度使圖像可見，但添加高度：100％或高度：自動使圖像消失，我相信這可能是一個非常簡單的代碼片段，但我似乎無法找到解決方案。下面是我使用實現圖像匹配高度與100％寬度

.image-left { 
    float:left; 
    width:100%; height:100%; 
    background-image:url(/img/image.jpg); 
    background-position: center top; 
    background-size: 100% 100%; 
}

這裏的代碼是一個http://jsfiddle.net/WD4HM/3/，以便更好地解釋我的問題。

任何幫助將不勝感激，謝謝你們。

來源

2014-03-12 user3380148

height: 100%不起作用，除非父元素有一個明確的高度。當您使用此規則時圖像消失的原因是因爲該元素實際上具有無高度。

但是，您可以使用javascript捕獲窗口高度，然後匹配您希望成爲窗口高度100％的元素。

來源

2014-03-12 18:25:14 JakeParis

我想避免這樣的事情，因爲他們將在整個網站上發生很多事情。我可能不得不解決img標籤。感謝@JakeParis的幫助 – user3380148

新的答案：

#wrap { 
width:50%; 
margin:0 auto; 
overflow:hidden; 
background:blue; 
} 
.img-left { 
float:left; 
width:100%; 
height: 100%; 
background-image:url(tiger.jpg); 
background-position: center top; 
background-size: 100% 100%; 
margin-bottom:45px; 
}

來源

2014-03-12 18:20:13

恐怕不起作用，讓我打個jsfiddle來解釋我的問題好一點。 @Don Kelley – user3380148

好的我會看看，thx –

我可以讓圖像顯示並動態調整大小，因爲我在Safari瀏覽器中使用窗口在我的Mac上進行了一些更改。照片的縱橫比也會發生變化（並且將url更改爲您自己的老虎圖片......也可以根據需要更改您的邊距/填充）......這是否與您想要做的一樣？看看我上面編輯的答案，我們將繼續努力。 –

匹配高度與100％寬度

回答

相關問題