jquery 缩放以适合高度和宽度(拉伸)

wztqucjr  于 2023-03-01  发布在  jQuery
关注(0)|答案(2)|浏览(190)

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

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

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

zoom: 2

这会拉伸画布,但如果新的纵横比不是800 x480,那么它不会完全拉伸到高度或宽度。
有没有这样的东西,我可以设置一个单独的宽度和高度拉伸?

zoom: (2, 2.5)
daolsyd0

daolsyd01#

不能单独缩放宽度和高度,但可以使用CSS scale属性模拟缩放效果,该属性可以单独应用于X轴和Y轴:

transform: scaleX(2) scaleY(1.5);

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

0kjbasz6

0kjbasz62#

视口宽-高可能是您在此处需要的

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
}

如果希望元素保持它们的相对位置,可以对topleft css属性使用相同的规则
虽然并非所有浏览器都支持此功能,但可使用here多边形填充功能使其恢复到IE8

相关问题