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

Question

我正在嘗試在屏幕（也是任意寬度/高度）下以全屏顯示圖像（任意寬度/高度）。 我正在使用HTML / CSS / JS。 我希望圖像始終占據全屏。 如果圖像的縱橫比比屏幕低，那么我應該修剪頂部和底部。 如果圖像的縱橫比比屏幕高，那么我應該左右剪切。 我永遠都不想在邊緣看到黑色。 我可以使用background-image（和background-position等）來完成此操作，但是我對此有疑問（更新時圖像會閃爍）。 所以我想使用標簽。 有人知道我會怎么做嗎？

Answer 1

如果您使用的是jQuery，請查看以下內容： http : //vegas.jaysalvat.com/

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

Answer 2

我認為這個問題很好而且很清楚，很明顯，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將圖像水平居中。

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

Answer 3

如果您希望它使用background-size進行拉伸，或者如果它必須是標簽，則使用max-width：100％; 為了居中使用display：block; 保證金：0自動;

我不太確定你之后會怎樣...

您如何更新圖像使其閃爍？ 什么時候發生？ 聽起來像是對background-position：center的工作。