div与浏览器的大小调整

我试图建立一个简单的图像查看器，调整浏览器的宽度/高度。我相信我快到了。但是，我需要提示如何完成此操作。这是代码。我不想使用jquery，因为我试图尽量保持简单和尽可能轻。div与浏览器的大小调整

谢谢 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>

来源

2012-05-25 mkrisch

你到底是丢失了怎么办？ – chucktator

我不确定。这是为你工作吗？我在div附近增加了一个坚实的红色边界进行测试。该div似乎没有调整与浏览器的高度。 – mkrisch

如何设置maxHeight和maxWidth代替宽度和高度需要它是100％的。这样，你甚至可以不需要指定“自动”

所以，在你的榜样将是

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

来源

2012-05-25 17:14:29 walmik

没有运气与该修复程序。它对你有用吗？我想知道的一件事是...有可能通过浏览器高度来调整大小吗？ – mkrisch

oops，maxWidth和maxHeight是仅对块级元素或具有绝对或固定位置的元素有效的属性。也许将divResize的'position'设置为固定或绝对可能有效？ – walmik

我又添加了一个答案，它实现了你想要的纯CSS（无JavaScript） – walmik

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

来源

2012-05-25 17:18:29 chucktator

好的，这里完全是另一个答案（根据你想要设置基于'高度'的'拉伸'的评论......这一个没有使用JavaScript的事件！只要确保HTML和正文的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; }

来源

2012-05-25 18:01:30 walmik

div与浏览器的大小调整

回答

相关问题