2

有人可以解释一下为什么这段代码不起作用。浏览器以值 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>
4

3 回答 3

0

我已经按原样复制粘贴了您的代码并做了一个小改动。

由此

<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

于 2013-05-12T05:03:29.113 回答
0

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

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

并将这一行添加到“其他”部分：

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

非常感谢！

于 2013-05-14T01:13:25.227 回答
0

感谢您的建议，不要将 vspace= 的值放在引号内[与 W3 的参考相反]，我将数学表达式直接写为其值 [不带引号]，而不是将其绑定到变量：将此行添加到 if- “resizeImage()”的一部分：

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

如果高度= 100%，这会使图像水平居中

并将这一行添加到“其他”部分：

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

如果宽度调整为 100%，这会使图像垂直居中

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

再次感谢你的帮助！！

于 2013-05-14T01:43:04.663 回答