仅使用 CSS 将图像大小调整为自身的百分比

在网页设计领域，需要将图像大小调整为特定尺寸经常出现。一种场景涉及将图像的大小减小到其原始大小的一定百分比，而不改变其容器元素的大小。虽然 JavaScript 或服务器端脚本提供了解决方案，但本文探讨了潜在的纯 CSS 替代方案。

是否可以使用 CSS 百分比调整图像大小？

目前，没有直接的 CSS 属性允许根据图像自身的大小调整图像的大小。不过，有两种巧妙的方法可以实现这种效果：

方法一：通过变换进行视觉调整大小

该方法在视觉上缩小了图像的尺寸，但不影​​响其效果实际尺寸。该技术使用“transform:scale()”属性将图像缩小指定的百分比。图像在其原始尺寸内保持居中。

示例：

img {
  transform: scale(0.5);
}