2

我的应用程序中有一个宽度：530px 和高度：510px 的图像区域。我想在该区域放置图像，但图像的大小不同。如何在不丢失纵横比的情况下裁剪或缩放图像以填充该区域。winjs 中是否有可用的本机方法？

4

2 回答 2

5

你有几个选择。

一种是使用 WinJS 为您提供的ViewBox 控件。ViewBox 只能有一个子项（因此您可能会将您的标签作为其唯一的子项或包含您的 img 的 div），并且它将缩放该子项（使用 CSS 转换）以适应其容器（不改变方面比率）。它很光滑。

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

如果您的情况有点特殊，您必须诉诸的最后一个选择毕竟不是一个糟糕的选择。在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);
    }
}

希望有帮助！

于 2012-12-11T15:36:35.760 回答
0

您是指缩放 HTML 图像吗？如果是这样，您可以设置宽度或高度之一。无论您设置哪个，另一个都会缩放并保持图像纵横比。

于 2012-12-11T04:36:40.887 回答