的div元素響應高度

我有一個負責任的旗幟的div元素響應高度

.mybanner { 
    height:320px; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

響應圖像背景工作正常此代碼，唯一的問題是.mybanner容器的高度不改變

例如，當我與大考驗屏幕

mybanner div element width = 980px 
mybanner div element height = 320px 
bakcground_image width = 980px 
background_image height = 320px

但是當我調整畫面，讓說寬度mybanner div元素成爲680像素

mybanner div element width = 680px 
mybanner div element height = 320px 
bakcground_image width = 680px 
background_image height = 220px

從這個例子沒有與background_image高度不同的值mybannder高度，所以它已經成爲難看的空白

我已經嘗試修改它這樣，使.mybanner高度成爲汽車

.mybanner { 
    min-height:170px; 
    max-height:320px; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

或本：

.mybanner { 
    height:100%; 
    //height:auto; 
    background:url(../img/banner.png) no-repeat; 
    background-size:100%; 
}

但不行....
任何想法如何使div.mybanner的高度改變，這取決於他的背景上的圖像大小

來源

2014-10-02 Neversaysblack

我明白英語不是你的語言，但很難理解你的意思，可能是因爲我們不知道.mybanner類是什麼。這是一個圖像？一個div？一個p？別的東西？請記住隨時添加您的標記，因爲您的身高正在變化。你看到（或看不到）是一個完全不同的故事，它的基礎是標記。順便說一下，如果我不得不打賭，我會建議將背景大小從'100％'更改爲'cover' – Devin 2014-10-02 05:15:13

@fabio sory如果我描述它不清楚..... mybanner是一個div元素，我使用'背景大小= 100％'，因爲我想根據屏幕調整我的背景圖像在..mybanner .....如果我使用'背景大小：封面'不會顯示一個完整的圖像，當屏幕小...我的情況需要完整的形象來顯示，所以我選擇100％，而不是覆蓋） – Neversaysblack 2014-10-02 06:17:52

您可以使用JavaScript更改高度。

<body onresize="resizediv()"> 
<div class="mybanner" id="mybanner"> 
... 

<script> 
function resizediv() { 
div = document.getElementById('mybanner'); 
    var imageSrc = div.style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0]; 

    var image = new Image(); 
    image.src = imageSrc; 

    var width = image.width, 
     height = image.height; 

    div.style.height = image.height; 

} 
</script>

或者有所有背景大小的有效屬性，你可以選擇最好的一個：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

或簡單的不使用的背景下，把IMG到div作爲一個對象，並設置圖像寬度100％不編輯div和圖像高度，它會自動計算。

來源

2014-10-02 06:32:31 Martin

hm ...我認爲問題不是在背景大小屬性....我可以使用background-size：包含，但它是給我與background-size：100％相同的結果，因爲mybanner div class的高度是320px ....如果我使用mybanner類的'auto'或'100％'高度橫幅不見了（當然是因爲mybanner don' t有高度，沒有任何內容只是背景） – Neversaysblack 2014-10-02 06:45:58

我根據自己的背景，需要div .mybanner的高度，具體取決於他背景上的圖像大小，編輯過回答 – Martin 2014-10-02 06:47:19

你是對的，如果我把IMG作爲對象而不是背景將被解決...但在上面的圖像我會把相同的輸入文本，所以我認爲不適合我的情況...無論如何，當我嘗試使用該js代碼...我調整了大小，mybanner不見了它看起來像mybanner.div.style成爲0 – Neversaysblack 2014-10-02 06:56:34

的div元素響應高度

回答

相關問題