Jquery CSS缩放以适应高度和宽度（拉伸）

我的内容在一个800x480像素的容器中。当窗口调整大小时，我的目标是：

• 缩放/拉伸容器以填充整个屏幕
• 包括容器的所有子容器，并保持其相对位置
• 我不在乎保持纵横比

因此，当窗口宽度/高度为1600x960时，我执行以下操作：

zoom: 2

这会拉伸画布，但是如果新的纵横比与800x480不同，那么它就不会完全拉伸到高度或宽度

这样的东西不可用吗？我可以为宽度和高度设置一个单独的拉伸

zoom: (2, 2.5)

---

视口宽度和高度可能是此处需要的

div#content{
    width: 100vw; // The width of this element is 100% of the viewports width
    height: 100vh; // The height of this element is 100% of the viewport height

    font-size: 1vmax; // You can fiddle with this to mame sure the font gets
                      // the size you want
}

如果希望元素保持其相对位置，可以对

top

和

left

css属性使用相同的规则

---

虽然并非所有浏览器都支持此功能，但可以使用多边形填充将其恢复到IE8

您不能单独缩放宽度和高度，但可以使用模拟缩放效果，从而可以单独应用于X轴和Y轴：

transform: scaleX(2) scaleY(1.5);

---

不要忘记将变换原点指定为

0 0

，这样元素的顶部/左侧不会被视口裁剪。

谢谢，它可以工作。这是否意味着我不能再使用“-webkit transition:translate3d（0,0,0）；”了？