我有一个绝对定位的div，其中包含一个百分比高度和一个图像。该图像的高度为100％，宽度为自动。调整视口的高度时，绝对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>
与img不同，div的宽度不会对应于其高度的任何变化（此外，div的隐式宽度现在对应于视口的宽度）。
我在这里看到两个选择...
一个库（例如jQuery）可能是最好的选择（这是jsfiddle）：
$(window).resize(function() {
var imgWidth = $('img').outerWidth();
$('div').css({
'width':imgWidth
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句