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

「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);

どうもありがとう！

于 2013-05-14T01:13:25.227 に答える
0

vspace= の値を [W3 の参照に反して] 引用符で囲まないというあなたの提案のおかげで、数式を [引用符なしで] その値として直接記述し、変数にバインドしません: この行を if- に追加します。 「resizeImage()」の一部:

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

height= 100% の場合、これは画像を水平方向に中央揃えにします

また、次の行を「else」部分に追加します。

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

これにより、幅が 100% にサイズ変更された場合に画像が垂直方向に中央揃えになります

これは非常に単純に見え、CSS では実行できません。

またよろしくお願いします!!

于 2013-05-14T01:43:04.663 に答える
0

コードをそのままコピーして貼り付け、小さな変更を 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

于 2013-05-12T05:03:29.113 に答える