Html 绝对定位DIV的宽度不基于子图像调整大小

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

例如：

CSS

HTML

div的宽度不会对应其高度的任何更改，这与img不同。此外，div的隐式宽度现在对应于视口的宽度

我在这里看到两个选择

媒体查询 JavaScript 像jQuery这样的库可能是您的最佳选择以下是：

---

这是我要的。线程中的其他答案可能也值得一读，似乎仅用CSS无法修复。这是到的链接。谢谢Mathijs。我搜索了又搜索类似的问题。但看起来我在搜索中找不到合适的关键词来找到你引用的关键词。我希望避免使用JS来解决这个问题，但这可能是不可能的。谢谢

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

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

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

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

$(window).resize(function() {

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

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

});