Question

我使用以下javascript来调整图片大小，因为窗口调整大小可以在Chrome以外的所有浏览器中正常使用：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >    
</body>
</html>

Chrome的问题在于，首次加载页面时图片不会调整大小以适应窗口大小，但是在加载后调整浏览器窗口大小时，图像会正确调整大小调整大小的浏览器窗口。

尝试点击http://www.mnhscs.com/christmas

奇怪的是，每次在Chrome中加载页面时都不会出现此问题。有时图像会正确调整大小。

Answer 1

因为你正在使用$（document）.ready，你的图像加载会出现竞争条件。有时图像将在调整大小调整函数之前完成加载，因为.ready（）只等待dom完成，而不是加载图像。您需要使用document.load（），它将等待图像加载。你之所以在Chrome中看到这个原因，是因为它的速度非常快：）

Official way to ask jQuery wait for all images to load before executing something

确保在使用Chrome进行测试时关闭缓存。如果缓存的图像掩盖了问题，我不会感到惊讶，因为图像的加载速度和DOM一样快。

Disabling Chrome cache for website development

Answer 2

$(window).bind('load resize', function() { set_body_height(); });

根据要求解释几句话。

如其他答案中所述，应首先从onLoad事件调用set_body_height，然后侦听resize事件。由于首先触发document.ready（），因此可以将两个事件绑定到同一个处理程序，如图所示。

似乎是自我解释的。

Answer 3

正如@Jazzepi所指出的，在某些情况下，javascript可能没有按预期运行。

但是，还有一个仅限CSS的选项可用于应用100％的窗口高度 - vh。

.fit {
  height: 100vh;
}

这将确保元素调整到正确的高度。 vh后缀将查看器高度的百分比应用于元素 - 在此实例中为100。

小提琴：http://jsfiddle.net/87avhd4v/1/

使用Javascript调整窗口大小时调整图像大小 - 在Chrome中无效

3 个答案: