絕對定位的DIV的寬度不根據子圖像調整大小

我有一個絕對定位的div與百分比高度和圖像。該圖片的高度爲100％，寬度爲自動。當調整視口的高度時，絕對div不會調整其寬度，圖像將被切斷，否則您會看到div的背景。絕對定位的DIV的寬度不根據子圖像調整大小

CSS

div { 
    position: absolute; 
    overflow: hidden; 
    height: 50%; 
    bottom: 80px; 
    left: 5%; 
    background: blue;  
} 

img { 
    height: 100%; 
    width: auto; 
    display: block; 
}

HTML

<p>adjust the height of the viewport</p> 

<div> 
    <img src="http://lorempixel.com/400/200" /> 
</div>

來源

2014-01-10 AndrewK

這裏是[一個鏈接到一個JS黑客答案]（http://stackoverflow.com/a/16864468/1846192）哪些[將解決你r問題]（http://jsfiddle.net/Y5Cr7/6/）。線程中的其他答案可能也值得一讀，但似乎不可能僅使用CSS進行修復。這裏有一個鏈接[一個答案，流露出更多的光線，爲什麼事情的行爲方式，他們的行爲]（http://stackoverflow.com/a/5251088/1846192）。 –

謝謝Mathijs。我搜索並搜索了類似的問題。但它看起來像我不能在我的搜索中提出正確的關鍵字來獲取我引用的關鍵字。 – AndrewK

的

DIV 的寬度將不對應於在其高度的任何變化，不像IMG （另外，div's隱含寬度現在對應於視口的寬度）。

在這裏我看到兩個選項...

媒體查詢
的JavaScript

庫（如jQuery）可能是你最好的選擇（這裏是jsfiddle）：

$(window).resize(function() { 

    var imgWidth = $('img').outerWidth(); 

    $('div').css({ 
     'width':imgWidth 
    }); 

});

來源

2014-01-10 19:45:07

我曾希望避免使用JS來解決問題，但這可能是不可能的。謝謝。 – AndrewK

絕對定位的DIV的寬度不根據子圖像調整大小

回答

相關問題