Question

这是Chrome中的一个奇怪的错误，在我通过JS更新div的高度后，它还应该更新它的宽度，因为它的内部子图像标记高度也已更新，它也更新了它＆＃39宽度＆amp;这似乎在Firefox中运行良好，但在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

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

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

<强> DEMO

我在图片标记上应用了高度，而不是Div，它有效！

JS：

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

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

2 个答案: