CSS缩放到适合高度和宽度（拉伸）-Java 学习之路

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

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

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

zoom: 2

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

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

zoom: (2, 2.5)

2 回答

6
您无法独立缩放宽度和高度，但您可以使用CSS scale property模拟缩放效果，您可以将其独立应用于X轴和Y轴：
```
transform: scaleX(2) scaleY(1.5);
```
DEMO

不要忘记将变换原点指定为 0 0 ，以便视口不会裁剪元素的顶部/左侧 .
回复于 2024-05-02T12:49:34+08:00

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

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

回复于 2024-05-02T12:49:34+08:00

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

2 回答

相关问题