html - 绝对定位的 DIV 宽度不根据子图像调整大小

Question

我有一个绝对定位的 div，其中包含一个百分比高度和一个图像。该图像的高度为 100%，宽度为自动。当调整视口(viewport)的高度时，绝对 div 不会调整它的宽度，图像会被截断或者您会看到 div 的背景。

示例:http://jsfiddle.net/Y5Cr7/

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>

Answer 1

div 的宽度不会对应于其高度的任何变化，这与 img 不同(此外，div' s 的隐式宽度现在对应于视口(viewport)的宽度。

我在这里看到两个选项...

1. 媒体查询
2. JavaScript

库(例如 jQuery)可能是您最好的选择(这里是 jsfiddle ):

$(window).resize(function() {

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

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

});