如何以全高和可變寬度居中圖像

我試圖在屏幕（也是任意寬度/高度）時在全屏中顯示圖像（任意寬度/高度）。我正在使用HTML/CSS/JS。我希望圖像始終佔據整個屏幕。如果圖像的縱橫比低於屏幕，則應剪切頂部和底部。如果圖像的縱橫比高於屏幕，那麼我應該左右剪切。我從來不想在邊緣看到黑色。我可以使用背景圖像（和背景位置等），但我有一個問題（圖片閃爍，因爲我更新它）。所以我想用一個標籤。有誰知道我會怎麼做？如何以全高和可變寬度居中圖像

來源

2012-12-09 Jack Flint

你想要或需要支持哪些瀏覽器？你試過什麼了？你能顯示一些代碼嗎？你目前的方法有什麼問題？你爲什麼需要或想要這樣做？你怎麼會得到「邊緣黑色」？請注意，您可以編輯您的問題以添加更多詳細信息！ – Jeroen

Windows 8，所以它是IE10。沒有其他瀏覽器兼容性必要如果你能想出問題的答案，那麼我懷疑它會複製到目前爲止所拋出的任何東西。我需要/想要這樣做，因爲這是要求。如果黑色是背景色，圖像沒有佔據整個屏幕，我會在邊緣變黑。 –

這是一個窗口，或一個應用程序？例如。它可以在運行時調整大小嗎？ –

我認爲這個問題是很好的和明確的，顯然的OP沒有任何代碼...這就是他問這個問題的原因。

我遇到過這個確切的問題。我不認爲有一種方法可以使用HTML/CSS，如果您希望圖像最終大於含有過多剪輯的包含元素，除非您可以將圖像置於背景中。如果你需要使用標籤，那麼一個好的解決方案就是要做到這一點。這就是我所做的。

function setImagePosition() { 
    var img = q(".viewCamera #viewport img"); 
    if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) { 
     img.style.width = format("{0}px", outerWidth); 
     img.style.height = ""; 
     img.style.top = format("{0}px", (outerHeight - img.clientHeight)/2); 
     img.style.left = "0px"; 
    } else { 
     img.style.width = ""; 
     img.style.height = format("{0}px", outerHeight); 
     img.style.top = "0px"; 
     img.style.left = format("{0}px", (outerWidth - img.clientWidth)/2); 
    } 
}

讓我解釋...

的outerWidth/outerHeight結果在窗口的縱橫比。 img.naturalWidth/img.naturalHeight是圖像的寬高比。如果第一個更大，那麼我們需要將圖像的寬度設置爲窗口的寬度並計算top值以垂直居中圖像。如果第二個更大，那麼我們需要設置圖像的高度，然後使用left水平居中圖像。

希望有幫助！您可以在我的codeSHOW項目codeshow.codeplex.com和Windows Store中的aka.ms/codeshowapp找到一堆Windows 8 HTML/JS相關幫助。

來源

2012-12-12 16:18:09

謝謝。那很完美！ –

-1

如果您希望它使用背景大小，或者它必須是標記，請使用max-width：100％;爲了中心使用display：block;和餘量：0自動;

我不是很確定什麼youre後，雖然...

如何更新圖像，以便它閃爍？它何時發生？這聽起來像是一個背景位置：中心的工作。

來源

2012-12-09 22:10:35 user1721135

當我用js更新它時閃爍。 –

如何提供一些代碼？對不起，但提供了難以置信的問題，我沒有任何代碼，我懷疑任何人都能理解並幫助你 – user1721135

如果您正在使用jQuery，看看這些： http://vegas.jaysalvat.com/

或更輕巧： http://srobbin.com/jquery-plugins/backstretch/

來源

2012-12-09 23:12:09 piatek

沒有jQuery。我想用純HTML/CSS來做。 –

如何以全高和可變寬度居中圖像

回答

相關問題