jquery - Div 在通过 JS 更新后不会根据内部 img 重新计算它的宽度 - Chrome

Question

DEMO

这是 Chrome 中的一个奇怪的错误，在我通过 JS 更新 div 的高度后，它也应该更新它的宽度，因为它的内部子图像标签高度也被更新，这也更新了它的宽度&这似乎在 firefox 中工作正常但是不在 chrome 中。

我已经尝试了很多东西，但它似乎是 chrome 的绘画问题。请帮忙!

P.S 如果我检查元素图像标签并禁用然后启用高度 100% 属性，它会按应有的方式呈现!!

CSS

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

JS

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

Answer 1

我在你的基础上做了一个 fiddle ，展示了我的建议:

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

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

// 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>

或类似的东西，通常拉伸(stretch)图像应该只使用 CSS 来实现最干净的方法。

希望对您有所帮助。