使用浏览器调整div的大小

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

如何设置maxHeight和maxWidth而不是需要为100％的宽度和高度。 这样，您甚至无需指定“自动”

所以在你的例子中

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

Answer 2

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

Answer 3

好的，这是一个完全相同的答案（基于您对基于“高度”设置“拉伸”的评论...此事件不使用JavaScript！只需确保html和body CSS属性的高度设置为100％然后将图像CSS height属性设置为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 个解决方案

解决方案1
0 2012-05-25 17:14:29

解决方案2
0 2012-05-25 17:18:29

解决方案3
0 2012-05-25 18:01:30

使用浏览器调整div的大小

问题描述

3 个解决方案

解决方案1 0 2012-05-25 17:14:29

解决方案2 0 2012-05-25 17:18:29

解决方案3 0 2012-05-25 18:01:30

解决方案1
0 2012-05-25 17:14:29

解决方案2
0 2012-05-25 17:18:29

解决方案3
0 2012-05-25 18:01:30