0

ブラウザの幅/高さに合わせてサイズを変更するシンプルな画像ビューアを作成しようとしています。私はもうすぐそこにいると思います。ただし、これを完了する方法についてのヒントが必要です。これがコードです。私はこれをできるだけシンプルで軽量にしようとしているので、jqueryを使いたくありませんでした。

ありがとう、MK

<style type="text/css">
body {
    background-color: #999;
}
#fullscreenPhoto {
    border: thin solid #F00;
}
</style>

<body onresize="resizeImage()">
<div onload="resizeImage()" margin="0" border="0" id="fullscreenPhoto">
    <img  src="resizeImage.jpg" width="100%" >
</div>
<script type="text/javascript">
var divResize = document.getElementById('fullscreenPhoto');

function resizeImage()
{
    var window_height = document.body.clientHeight
    var window_width  = document.body.clientWidth

    var image_height  = divResize.offsetHeight
    var image_width   = divResize.offsetWidth

    var height_ratio  = image_height / window_height
    var width_ratio   = image_width / window_width

    if (height_ratio > width_ratio)
    {
        divResize.style.width  = "auto"
        divResize.style.height = "100%"
    }
    else
    {
        divResize.style.width  = "100%"
        divResize.style.height = "auto"
    }
}
</script>
</body>
4

3 に答える 3

0

Ok, here s another answer altogether (based on your comment on wanting to set the 'stretch' based on 'height'... this one doesnt event use JavaScript! Just make sure the html and body CSS property height is set to 100% and then set the image CSS height property to 100%

HTML:

<div  margin="0" border="0" id="fullscreenPhoto">
    <img src="http://www.walmik.com/wp-content/themes/spring/images/motif.png" >
</div>

CSS:

html, body {height: 100%; margin: 0; padding: 0;}
#fullscreenPhoto img {position:fixed; top:0; left:0; width:auto; height:100%;}

And finally, here s a working example: http://jsfiddle.net/XwBxh/

And here s a small addition in case you want to support IE6:

html { overflow-y: hidden; }
body { overflow-y: auto; }
#fullscreenPhoto img { position:absolute; z-index:-1; }
于 2012-05-25T18:01:30.637 に答える
0

width と height の代わりに maxHeight と maxWidth を 100% に設定するのはどうですか。そうすれば、「auto」を指定する必要さえないかもしれません

だからあなたの例ではそれは

if (height_ratio > width_ratio)
{
    divResize.style.maxHeight = "100%"
}
else
{
    divResize.style.maxWidth  = "100%"
}
于 2012-05-25T17:14:29.797 に答える
0

はdivロードされません。プリミティブな HTML タイプです。onloadイメージタグにステートメントを入れる必要があります。また、画像は Div 内にあるため、サイズを変更する必要はありません。イメージで引き伸ばされます。

于 2012-05-25T17:18:29.067 に答える