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

Question

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

Answer 1

你有几个选择.

一种是使用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);
    }
}

希望有所帮助!