僅使用CSS 將圖片大小調整為自身的百分比

在網頁設計領域，需要將圖片大小調整為特定尺寸經常出現。一個場景涉及將影像的大小減小到其原始大小的一定百分比，而不改變其容器元素的大小。雖然 JavaScript 或伺服器端腳本提供了解決方案，但本文探討了潛在的純 CSS 替代方案。

是否可以使用 CSS 百分比調整圖片大小？

目前，沒有直接的 CSS 屬性允許根據圖像本身的大小調整圖像的大小。不過，有兩種巧妙的方法可以實現這種效果：

方法一：透過變換進行視覺調整大小

該方法在視覺上縮小了圖像的尺寸，但不影​​響其效果實際尺寸。該技術使用“transform:scale()”屬性將影像縮小指定的百分比。影像在其原始尺寸內保持居中。

範例：

img {
  transform: scale(0.5);
}