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

Question

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

• 缩放/拉伸容器以填满整个屏幕
• 包括容器内所有子元素并保持它们之间的相对位置不变
• 我不关心保持纵横比

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

zoom: 2

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

有没有类似的选项，可以单独设置宽度和高度的拉伸比例？

zoom: (2, 2.5)

- P.Henderson

Answer 1

您无法独立缩放宽度和高度，但是您可以使用CSS比例属性来模拟缩放效果，该属性可分别应用于X和Y轴：

transform: scaleX(2) scaleY(1.5);

body,html{margin:0;}
.wrap{
    width:400px;
    height: 240px;
    background:gold;
    text-align:center;
    overflow:hidden;
    transform-origin: 0 0;
    transform: scaleX(2) scaleY(1.5);
}

<div class="wrap">
    <h1>Title</h1>
    <img src="https://loremflickr.com/640/360" />
    <p>Some text</p>
</div>

别忘了指定变形起点为0 0，以防止你的元素被视口裁剪掉。

- web-tiki

---

谢谢，它起作用了。这是否意味着我不能再使用“-webkit-transition: translate3d(0,0,0);”了？ - P.Henderson

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
}

如果您希望元素保持它们的相对位置，您可以使用相同的规则来设置CSS属性top和left。

虽然不是所有的浏览器都支持这种方式，但是在这里可以获得polyfills以使其能够在IE8上运行。

- Loupax