CSS缩放到适合高度和宽度(拉伸)

Question

我的内容是800x480像素的容器.当窗口调整大小时,我的目标是:

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

所以当窗口宽度/高度为1600x960时,我会执行以下操作:

zoom: 2

这会拉伸画布,但如果新的宽高比与800x480不同,那么它将无法完全拉伸到高度或宽度.

是不是这样的东西,我可以设置宽度和高度的单独拉伸？

zoom: (2, 2.5)

Answer 1

您无法独立缩放宽度和高度,但您可以使用可以独立应用于X轴和Y轴的CSS缩放属性来模拟缩放效果:

transform: scaleX(2) scaleY(1.5);

DEMO

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