Question

我正在尝试构建一个简单的图像查看器，可以根据浏览器的宽度/高度调整大小。我相信我差不多了。但是，我需要提示如何完成此操作。这是代码。我不想使用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>

Answer 1

如何设置最大高度和最大宽度，而不是宽度和高度，需要100％。这样你甚至可能不需要指定'auto'

所以在你的例子中它将是

if (height_ratio > width_ratio)
{
    divResize.style.maxHeight = "100%"
}
else
{
    divResize.style.maxWidth  = "100%"
}

Answer 2

永远不会加载div。它是一种原始的HTML类型。您必须将onload语句放在图像标记中。由于图像在Div中，因此您无需调整大小。它会被图像拉伸。

Answer 3

好的，完全是另一个答案（基于你想要根据'height'设置'stretch'的评论...这个事件不使用JavaScript！只需确保设置html和body CSS属性高度到100％，然后将图像CSS高度属性设置为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%;}

最后，这是一个有效的例子：http://jsfiddle.net/XwBxh/

如果你想支持IE6，这里有一个小小的补充：

html { overflow-y: hidden; }
body { overflow-y: auto; }
#fullscreenPhoto img { position:absolute; z-index:-1; }

div使用浏览器调整大小

3 个答案: