windows-8 - 如何在不丢失 winjs 纵横比的情况下将图像调整为固定的高度和宽度？

Question

我的应用程序中有一个图像区域，宽度为:530 像素，高度为:510 像素。我想在该区域放置图像，但图像有不同的大小。如何在不损失宽高比的情况下裁剪或缩放图像以填充该区域。 winjs有没有原生方法？

Answer 1

你有几个选择。

一种是使用 ViewBox control WinJS 为您提供的。 ViewBox 只能有一个 child (所以你可能将你的标签作为它唯一的 child 或者一个包含你的 img 的 div)并且它会缩放那个 child (使用 CSS 转换)以适应它的容器(不改变方面比率)。它非常光滑。

另一种选择是将图像设置为容器(例如 div)的 CSS background-image 属性，并将 background-size 属性设置为 contain。这会将图像拉伸(stretch)到容器的大小。

如果您的情况有点特殊，您必须求助于最后一个选择，毕竟这不是一个糟糕的选择。在页面的 updateLayout 方法中，您可以引用该元素并显式设置其 CSS 属性以适合。到那时，您将了解所有关于布局的信息，并且可以轻松地计算出图像的尺寸。这是我执行此操作的一个项目中的一些代码。请注意，我正在比较屏幕和图像的纵横比，以确定我应该根据宽度还是高度调整大小。与您的情况不同(我猜)，我的代码确保图像填满屏幕并剪掉多余部分。我猜您希望包含您的 img。

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);
    }
}

希望对您有所帮助!