怎么用CSS拉伸圖片大小

在CSS中，我們可以使用transform屬性來拉伸圖片的大小，以下是一些示例代碼，展示如何實現這一功能：

1、拉伸圖片到原來的兩倍大小：

img {
  transform: scale(2);
}

2、拉伸圖片的寬度到原來的三倍，高度不變：

img {
  transform: scaleX(3);
}

3、拉伸圖片的高度到原來的兩倍，寬度不變：

img {
  transform: scaleY(2);
}

4、拉伸圖片到原來的三倍大小，同時保持寬高比：

img {
  transform: scale(1.5); /* 縮放因子為1.5 */
}

transform屬性會改變圖片的尺寸和形狀，因此在使用時需要注意保持圖片的原始寬高比，以避免圖片變形，如果需要保持圖片的原始尺寸不變，可以使用transform-origin屬性來指定變換的基點。

img {
  transform: scale(2); /* 縮放因子為2 */
  transform-origin: center; /* 變換基點為圖片中心 */
}

這樣，圖片就會從中心開始拉伸，保持原始尺寸不變，希望這些示例能幫助你更好地理解和使用CSS來拉伸圖片大小。