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與瀏覽器的大小調整

回答

相關問題