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

Question

我试图在屏幕(也是任意宽度/高度)时全屏显示图像(任意宽度/高度)。我正在使用 HTML/CSS/JS。我希望图像始终占据全屏。如果图像的宽高比低于屏幕，那么我应该剪裁顶部和底部。如果图像的宽高比高于屏幕，那么我应该剪裁左右。我永远不想在边缘看到黑色。 我可以使用 background-image(和 background-position 等)来完成，但我遇到了问题(图像在我更新时闪烁)。所以我想使用一个标签。有谁知道我会怎么做？

Answer 1

我认为这个问题很好很清楚，显然 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 元素中找到一堆与 Windows 8 HTML/JS 相关的帮助 codeshow.codeplex.com在 Windows 应用商店中 aka.ms/codeshowapp .