如何在React中通过CSS实现图片按任意百分比（如缩小50%）缩放

问题原因 #

你当前使用的width: 50%、height: 50%规则是相对于元素父容器的尺寸计算，并非基于图片本身的原始尺寸，所以无法达到预期效果。

可用解决方案 #

• 方案1：使用transform: scale（无需提前知晓图片原始尺寸，实现最简）
  该方案会保留元素在文档流中的原始占位，缩放操作不会影响周边元素布局，适合临时缩放场景。

.logo {
  /* 缩放比例直接填写数值，0.5对应原始尺寸的50%，可任意调整数值实现自定义缩放 */
  transform: scale(0.5);
  /* 可选配置：设置缩放的基准点，默认是元素中心，示例为左上角对齐缩放 */
  transform-origin: top left;
}

• 方案2：适配文档流缩放（缩放后元素占位同步缩小）
  需要提前知晓图片的原始宽高，通过CSS变量控制缩放比例，后续调整更便捷：

.logo {
  /* 自定义缩放比例，修改该值即可一键调整图片大小 */
  --scale-ratio: 0.5;
  /* 将400px替换为你的图片原始宽度 */
  width: calc(400px * var(--scale-ratio));
  /* height设为auto可自动保持图片原始宽高比，避免拉伸变形 */
  height: auto;
}

如果是背景图使用场景，参考以下配置：

.logo {
  --scale-ratio: 0.5;
  /* 将400px、200px替换为你的图片原始宽高 */
  width: calc(400px * var(--scale-ratio));
  height: calc(200px * var(--scale-ratio));
  background-image: url("你的图片路径");
  background-size: contain;
  background-repeat: no-repeat;
}

内容的提问来源于stack exchange，提问作者asem shaat