Question

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

Answer 1

你有几个选择。

一种是使用WinJS为您提供的ViewBox control。 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);
    }
}

希望有所帮助！

Answer 2

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

如何在不失去winjs宽高比的情况下将图像调整到固定的高度和宽度？

2 个答案: