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

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

于 2012-05-25T17:18:29.067 回答
0

好的，这完全是另一个答案（基于您对想要根据“高度”设置“拉伸”的评论......这个事件不使用 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; }
于 2012-05-25T18:01:30.637 回答
0

如何在需要为 100% 的地方设置 maxHeight 和 maxWidth 而不是宽度和高度。这样您甚至可能不需要指定“自动”

所以在你的例子中

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