居中在頁面中間的圖像

有人可以解釋爲什麼這個代碼不起作用。瀏覽器以值vspace =「0」響應。這意味着算術表達式不正確，但爲什麼？居中在頁面中間的圖像

<script type="text/javascript"> 

function resizeImage() 
{ 
var window_height = document.body.clientHeight 
var window_width = document.body.clientWidth 
var image_width = document.images[0].width 
var image_height = document.images[0].height 
var height_ratio = image_height/window_height 
var width_ratio = image_width/window_width 
var aspect_ratio = image_height/image_width 


if (height_ratio > width_ratio) 
{ 
    document.images[0].style.width = "auto"; 
    document.images[0].style.height = "100%"; 
} 
else 
{ 
    var new_vspace = Math.round((window_height - window_width*aspect_ratio)/ 2); 
    document.images[0].style.width = "100%"; 
    document.images[0].style.height = "auto"; 
    document.images[0].vspace="new_vspace"; 
} 
} 

</script> 
</head> 

<BODY bgcolor=#000000 onresize="resizeImage()"> 

<script> 
document.write('<center><img onload="resizeImage()" margin="0" border="0"  src="nweshow/picture-0011.jpg"/></center>') 
</script> 
</body>

來源

2013-05-12 user2317959

難道你不能只設置圖像的CSS屬性？ – 2013-05-12 04:34:08

對這類事情使用CSS通常更快，更安全，並且在窗口調整大小時不會延遲。 – Greg 2013-05-12 04:40:15

而你的代碼適合我。你正在使用哪種瀏覽器？ – Greg 2013-05-12 04:42:09

我複製粘貼你的代碼，並作出一個小的改變。

從這個

<center><img onload="resizeImage()" margin="0" border="0"  src="nweshow/picture-0011.jpg"/></center>

對此

<div style="text-align: center"><img onload="resizeImage()" margin="0" border="0"  src="nweshow/picture-0011.jpg"/></div>

其他然後，你的代碼工作完全正常，圖像大小調整和中心沒有任何問題。

編輯：忘記提到我使用Flickr的圖像進行檢測，這裏是鏈接：http://www.flickr.com/photos/[email protected]/8729551516/in/explore-2013-05-11

來源

2013-05-12 05:03:29 adamj

要回答adamj提供的最後一個答案，text-align選項只能將圖像水平放置在圖像的中心位置順便說一句，「堆棧溢出」添加註釋的問題是您無法啓動在按下之後，在註釋中出現一個新行，這個鍵會立即添加[未完成]註釋，所以我必須小心，這樣會導致垂直居中圖像的問題，以防i法師比我的代碼= .54中定義的圖片的高度：縱橫比要大得多。所以屏幕底部有很多空白，但沒有頂部。謝謝！ – user2317959 2013-05-12 14:55:49

試試'img {margin-left：auto;保證金右：自動;}' – Faizan 2013-05-13 16:52:59

問題通過加入這一行的條件的[如果一部分]解決「resizeImage（）」：

document.images [0] .hspace = Math.floor（（window_width - image_width/height_ratio）/ 2）;

和添加此線爲「else」部分：

document.images [0] = .vspace Math.floor（（window_height - IMAGE_HEIGHT/width_ratio）/ 2）;

非常感謝！

來源

2013-05-14 01:13:25 user2317959

感謝您的建議，不要將vspace =的值放在引號中[與W3的引用相反]，我將數學表達式直接寫爲[不帶引號]的值並且不將其綁定到變量：add this line到「resizeImage（）」的if部分：

document.images [0] .hspace = Math.floor（（window_width - image_width/height_ratio）/ 2）;

這個水平居中圖像的情況下，高度= 100％

，並且還添加此線爲「else」部分：

document.images [0] .vspace =數學。樓層（（window_height - image_height/width_ratio）/ 2）;

這種垂直居中圖像的情況下，寬度調整爲100％

這看起來很簡單，不能由CSS來完成。

再次感謝您的幫助！

來源

2013-05-14 01:43:04 user2317959

居中在頁面中間的圖像

回答

相關問題