CSS缩放以适合高度和宽度(拉伸) [英] CSS Zoom to Fit height and width (Stretch)

问题描述

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

My content is in a container of 800x480 pixels. When the window resizes, my goal is to:

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

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

So when the window width/height is 1600x960, I do the following:

zoom: 2

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

And this stretches the canvas, but if the new aspect ratio isn't the same as 800x480, then it won't fully stretch to either the height or the width.

没有这样的东西，我可以在其中为宽度和高度设置一个单独的拉伸吗?

Isn't something like this available, where I can set an individual stretch for the width and height?

zoom: (2, 2.5)

推荐答案

您不能单独缩放宽度和高度，但是可以使用

You can't zoom independently width and height but you can simulate the zoom effect with the CSS scale property that you can apply independently to X and Y axis :

transform: scaleX(2) scaleY(1.5);

DEMO

DEMO

别忘了将转换原点指定为0 0，以便视口不会裁剪元素的顶部/左侧.

Don't forget to specify a transform origin to 0 0 so that the top/left of your element isn't cropped by the viewport.

这篇关于CSS缩放以适合高度和宽度(拉伸)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！