動態調整大小的圖像

我想將響應圖像添加到擴展爲頁面全寬的首頁。類似許多滑塊做的，但我只有一個圖像，所以滑塊是矯枉過正的。我已經設置了一個div，並將它的背景圖像和背景大小設置爲100％，並且達到了寬度。我的問題是高度。爲了讓div出現，我必須使用固定的高度。我試着將高度設置爲自動，但是我沒有得到圖像。我嘗試使用這種方法：動態調整大小的圖像

How can I resize an image dynamically with CSS as the browser width/height changes?

，但我似乎無法得到寬度正確縮放。使用修正高度工作正常，直到瀏覽器窗口擴大超過圖像的大小，然後開始中斷。任何想法，我如何可以使寬度動態地縮放高度？任何想法將不勝感激！

我的代碼：

CSS：

.banner { 
    max-width: 100%; 
    height: 720px; 
    background: url(../images/homepagebanner.jpg) no-repeat left top; 
    background-size: 100%; 

}

HTML5：

<div class="banner"></div>

我使用的引導，但是這是一個容器外，因此不應該影響到這片的代碼。

編輯這裏的codepen： http://cdpn.io/xLvzA

來源

2014-05-02 Eric

您是否嘗試過HTML的高度設置爲100％，那麼你的旗幟的高度設置爲100％？添加一個codepen演示來顯示你的確切問題可能會有助於更好地幫助你確定你正在遇到的確切問題

來源

2014-05-02 15:34:58 Tevko

是的，那是我的第一個想法。將橫幅的高度設置爲100％會使圖像消失。我用codepen鏈接更新了這個問題。謝謝您的幫助！ – Eric

在這種情況下使用靜態圖像可能是最好的 – Tevko

我可能會回到這一點，但似乎有一個解決方案可以逃避我。我正在幫助一位設計專業的學生，她真的想要這樣的動態畫面。謝謝您的幫助。 – Eric

動態調整大小的圖像

回答

相關問題