CSS scale() 函数

定义和用法

CSS 的 scale() 函数用于缩放元素(宽度和高度)。

scale() 函数定义了元素在 x 和 y 方向上的缩放值。

scale() 函数在 transform 属性中使用。

实例

例子 1

使用 scale() 缩放多个 <div> 元素:

#myDiv1 {
  transform: scale(0.7);
}

#myDiv2 {
  transform: scale(110%);
}

#myDiv3 {
  transform: scale(1.1, 0.5);
}

亲自试一试

例子 2

使用 scale() 缩放图像:

#img1 {
  transform: scale(0.7);
}

#img2 {
  transform: scale(110%);
}

#img3 {
  transform: scale(1.1, 0.5);
}

亲自试一试

CSS 语法

scale(sx, sy)
描述
sx 必需。数字或百分比。指定宽度的缩放向量。
sy

可选。数字或百分比。指定高度的缩放向量。

如果省略,则值设置为与 sx 相同。

技术细节

版本: CSS Transforms Module Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相关页面

教程:CSS 2D 变换

参考:CSS transform 属性

参考:CSS scale 属性

参考:CSS scale3d() 函数

参考:CSS scaleX() 函数

参考:CSS scaleY() 函数