Question

我试图在屏幕（也是任意宽度/高度）时全屏显示图像（任意宽度/高度）。我正在使用HTML / CSS / JS。我希望图像始终占据整个屏幕。如果图像的宽高比低于屏幕，那么我应该剪切顶部和底部。如果图像的宽高比比屏幕高，那么我应该左右剪辑。我从不想在边缘看到黑色。我可以使用背景图像（和背景位置等）来做到这一点，但我遇到了问题（图像在我更新时闪烁）。所以我想使用标签。有谁知道我是怎么做到的？

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水平居中图像。

希望有所帮助！您可以在codeshow.codeplex.com和aka.ms/codeshowapp的Windows应用商店的codeSHOW项目中找到一堆Windows 8 HTML / JS相关帮助。

Answer 3

如果你想要拉伸使用背景大小，或者如果它必须是标签，请使用max-width：100％;为了集中使用display：block;和保证金：0自动;

我不太确定你在追求什么......

如何更新图像以使其闪烁？它什么时候发生？这听起来像是背景位置的工作：中心。

如何以全高和可变宽度居中图像

3 个答案: