使用Java窗口調整大小以調整圖像大小-在Chrome中不起作用
[英]Resize image as window resizes using Javascript - not working in Chrome
問題描述
我正在使用以下JavaScript來調整圖像的大小，使其成為窗口調整大小，該窗口調整大小在除Chrome之外的所有瀏覽器中均可正常運行：
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
var wh = $(window).height();
$('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
set_body_height();
$(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >
</body>
</html>
Chrome的問題在於，頁面首次加載時圖像的大小無法調整為適合窗口大小，但是加載頁面后調整瀏覽器窗口的大小時，圖像會正確調整為調整后的瀏覽器窗口大小。
嘗試點擊http://www.mnhscs.com/christmas
奇怪的是，每次在Chrome中加載頁面時都不會發生此問題。 有時圖像會正確調整大小。
3 個解決方案
解決方案1
0 2014-11-28 14:46:45
因為您使用的是$（document）.ready，所以圖像加載時存在競爭條件。 有時，在調用大小調整函數之前將完成圖像加載，因為.ready（）僅等待dom完成，而不等待圖像加載。 您需要使用document.load（），它還將等待圖像加載。 之所以只在Chrome中看到它，是因為它的速度非常快:)
要求jQuery在執行某些操作之前等待所有圖像加載的官方方式
確保在Chrome中進行測試時，請關閉緩存。 如果要緩存的圖像掩蓋了問題，我不會感到驚訝，因為圖像將像DOM一樣快地加載。
解決方案2
0 2014-11-28 14:51:30
$(window).bind('load resize', function() { set_body_height(); });
請按要求說明幾句話。
如其他答案所述，應首先從onLoad事件中調用set_body_height，然后偵聽調整大小事件。 由於首先觸發document.ready（），因此可以將兩個事件綁定到同一處理程序，如圖所示。
似乎自我解釋。
解決方案3
0 2014-11-28 14:52:20
正如@Jazzepi指出的，在某些情況下javascript可能未按預期運行。
但是，還有一個僅CSS選項可應用100％的窗口高度vh 。
.fit {
height: 100vh;
}
這樣可以確保將元素調整為正確的高度。 vh后綴將觀看者高度的百分比應用於元素-在這種情況下為100。
小提琴： http : //jsfiddle.net/87avhd4v/1/
如何使用 Chrome 使用 javascript 調整 HTML 瀏覽器 window 的大小
[英]how to resize a HTML browser window with javascript using Chrome
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.