通过JS更新后，div不会根据内部img重新计算其宽度-Chrome

Question

演示

这是Chrome中的怪异错误，在我通过JS更新div的高度后，它也应该更新了它的宽度，因为它的内部子图像标签高度也被更新了，这也更新了它的宽度，这在Firefox中似乎可以正常使用，但在chrome中却不能。

我已经尝试了很多东西，但是似乎是铬漆问题。 请帮忙！

PS：如果我检查元素图像标签并禁用，然后启用它应呈现的height 100％属性！

的CSS

.imgwrap {
    float: left;
    display: inline-block;
}
.imgwrap img{
    height: 100%;
    width: auto;
}

JS

$('.imgwrap').css({
    height: $(window).height()
});

Answer 1

我在你的上面摆了一个小提琴，展示了我的建议：

http://jsfiddle.net/L6jgvdh7/2/

您应该将此逻辑绑定到$(window).resize以便在窗口大小更改时将“拉伸”：

// declare resizing method
function resize_img() {
    $('.imgwrap').css({
        height: $(window).height()-50
    });
}

// bind window resize to resizing method (run on every resize)
$(window).resize(resize_img);

// resize image (once, on page load)
resize_img();

但是 ，我建议在这种情况下使用纯CSS ，如下所示：

<div style="background:url('path/for/background/image');background-size:cover"></div>

或类似的操作，通常只应使用CSS来完成图像的拉伸，这是最干净的方法。

希望能有所帮助。

Answer 2

演示

我在图片标签上而不是在Div上应用了高度，它起作用了！

JS：

$('.imgwrap img').css({
    height: $(window).height()
});