Question

有人可以解释一下为什么这段代码不起作用。浏览器以值vspace =“0”响应。这意味着算术表达式不正确，但为什么？

<script type="text/javascript">

function resizeImage()
{
var window_height = document.body.clientHeight
var window_width  = document.body.clientWidth
var image_width   = document.images[0].width
var image_height  = document.images[0].height
var height_ratio  = image_height / window_height
var width_ratio   = image_width / window_width
var aspect_ratio  = image_height / image_width


if (height_ratio > width_ratio)
{
    document.images[0].style.width  = "auto";
    document.images[0].style.height = "100%";
}
else
{
    var new_vspace = Math.round((window_height - window_width*aspect_ratio) /    2);
    document.images[0].style.width  = "100%";
    document.images[0].style.height = "auto";
    document.images[0].vspace="new_vspace";
}
}

</script>
</head>

<BODY bgcolor=#000000 onresize="resizeImage()">

<script>
document.write('<center><img onload="resizeImage()" margin="0" border="0"     src="nweshow/picture-0011.jpg"/></center>')
</script>
</body>

Answer 1

我已按原样复制粘贴代码并进行了一处小改动。

来自此

<center><img onload="resizeImage()" margin="0" border="0"     src="nweshow/picture-0011.jpg"/></center>

到此

<div style="text-align: center"><img onload="resizeImage()" margin="0" border="0"     src="nweshow/picture-0011.jpg"/></div>

除此之外，您的代码运行得非常好，图像可以调整大小并且没有任何问题。

编辑：忘记提及我使用了Flickr图片进行测试，这里是链接：http://www.flickr.com/photos/23397895@N08/8729551516/in/explore-2013-05-11

Answer 2

通过将此行添加到“resizeImage（）”的条件[if-part]中解决了问题：

document.images [0] .hspace = Math.floor（（window_width - image_width / height_ratio）/ 2）;

并将此行添加到“else”部分：

document.images [0] .vspace = Math.floor（（window_height - image_height / width_ratio）/ 2）;

非常感谢！

Answer 3

由于你的建议不要将vspace =的值放在引号内[与W3的引用相反]我将math-expression直接写为其值[不带引号]并且不将它绑定到变量：将此行添加到“resizeImage（）”的if部分：

document.images [0] .hspace = Math.floor（（window_width - image_width / height_ratio）/ 2）;

这使图像水平居中，以防高度= 100％

并将此行添加到“else”部分：

document.images [0] .vspace = Math.floor（（window_height - image_height / width_ratio）/ 2）;

这使图像垂直居中，以防宽度调整为100％

这看起来很简单，无法通过CSS完成。

再次感谢您的帮助!!

将图像居中放置在页面中间

3 个答案: