1

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

4

3 回答 3

0

如果您使用 jQuery，请查看以下内容：http: //vegas.jaysalvat.com/

或更轻量级： http ://srobbin.com/jquery-plugins/backstretch/

于 2012-12-09T23:12:09.190 回答
0

我认为这个问题很好很清楚，显然 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 的codeSHOW项目和位于aka.ms/codeshowapp的 Windows Store 中找到一堆与 Windows 8 HTML/JS 相关的帮助。

于 2012-12-12T16:18:09.647 回答
-1

如果你想让它拉伸使用背景大小，或者如果它必须是一个标签，使用 max-width:100%; 为了居中使用 display:block; 和保证金：0自动；

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

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

于 2012-12-09T22:10:35.073 回答