Question

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

缩放/拉伸容器以填满整个屏幕
包括容器的所有子女并保持其相对位置
我不关心保持宽高比

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

zoom: 2

这会拉伸画布，但如果新的宽高比与800x480不同，则它不会完全拉伸到高度或宽度。

不是这样的，我可以为宽度和高度设置单独的拉伸吗？

zoom: (2, 2.5)

Answer 1

您无法独立缩放宽度和高度，但您可以使用CSS scale property模拟缩放效果，您可以将其独立应用于X轴和Y轴：

transform: scaleX(2) scaleY(1.5);

<强> DEMO

不要忘记将变换原点指定为0 0，以便视口不会裁剪元素的顶部/左侧。

Answer 2

视口宽度 - 高度可能就是您需要的

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属性使用相同的规则

虽然并非所有浏览器都支持此功能，但可以使用polyfill here使其恢复到IE8

CSS缩放到适合高度和宽度（拉伸）

2 个答案: