如何找到瀏覽器窗口的「最大化」高度？

我想讓一張照片佔用用戶屏幕的70％。但是，如果在頁面加載時屏幕變小，或者如果人員檢查了元素打開，圖片變得很小並且拉伸。我相信最好的解決方案是找到瀏覽器窗口的最大高度，並將圖像大小。但是，我不知道該怎麼做？如何找到瀏覽器窗口的「最大化」高度？

這裏是我當前的圖像尺寸代碼：

var topoffset = window.innerHeight * 0.77; 
var profilestart = topoffset - $(".prof-header").height(); 
$('.splashPic').css("height", topoffset); 
$('.splashPlaceholder').css("top", profilestart);

我也想這樣，如果有人使用一個巨大的監視器（即大蘋果），圖像尺寸在這一點上馬克塞斯做呢？任何建議都會非常有幫助！

編輯：我不想動態調整圖像大小。只加載一次。

來源

2013-12-22 David Mckee

這聽起來像你想做的事是這樣的：

img{ 
    display:block; 
    width:70%; 
    min-width:320px; 
    max-width:1200px; 
}

來源

2013-12-22 22:18:43 Andrew

我期待修復高度，而不是寬度 –

使用window.screen.availHeight，而不是window.innerHeight

或screen.height

var x = screen.height*0.7;

編輯：這裏有更多的代碼表明，它適用於你問的問題。獲取加載時的高度，不會調整大小。

<img id="img2" src="http://lorempixel.com/320/240/food" /> 

<script> 
$(document).ready(function() { 
    var x = screen.height*0.7; 
    $('#img2').css("height",x); 
} 
</script>

來源

2013-12-22 22:19:39 user3123649

這是有效的。如果你使用了這個，或者它幫助你將答案標記爲接受。如果你沒有使用這個，你能顯示你做了什麼嗎？ – user3123649

如果你想要的形象佔據視高度的70％（顯然保持其比例），你可以使用新的CSS單元vh（視高度）是這樣的：

img 
{ 
    height: 70vh; 
}

FIDDLE

來源

2013-12-22 22:25:09 Danield

如何找到瀏覽器窗口的「最大化」高度？

回答

相關問題