绝对定位的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的宽度不根据子图像调整大小

回答

相关问题