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() 函數