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

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

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

您有几个选项可供选择

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

另一个选项是将图像设置为容器（例如div）的CSS背景图像属性，并将背景大小属性设置为

包含

。这会将图像拉伸到容器的大小

如果你的情况有点特殊，你必须求助于最后一个选择，这毕竟不是一个坏选择。在页面的

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

---

希望有帮助

谢谢你，作为一个div设置图像效果很好。这些属性对我有用。项目img{背景大小：封面；背景位置：中心；背景重复：无重复；}