开发游戏Harvester遇图标跨屏幕变形：如何保持尺寸比例一致？

你的问题出在同时用百分比设置宽和高——这两个百分比的参考对象分别是父元素的宽度和高度，当窗口或屏幕宽高比例变化时，图标自然会失去原有比例。下面是几种可靠的解决方法：

方法1：使用CSS aspect-ratio 属性（现代浏览器首选） #

直接指定图标原始宽高比，只设置宽度（或高度），让浏览器自动计算另一个维度，完美锁定比例：

.example {
  width: 50%; /* 按需求设置宽度占比，或用max-width限制最大尺寸 */
  aspect-ratio: 2/1; /* 替换成你的图标实际宽高比，比如1/1是正方形，3/2是宽3高2 */
  height: auto; /* 强制高度自动适配，覆盖之前的固定百分比 */
}

这个属性支持Chrome 88+、Firefox 89+、Safari 15.4+，如果你的目标浏览器版本较新，这是最简单的方案。

方法2：Padding 百分比技巧（兼容旧浏览器） #

利用CSS中padding的百分比基于父元素宽度的特性，用容器包裹图标来锁定比例：

/* 外层容器负责锁定比例 */
.icon-wrapper {
  width: 50%; /* 图标宽度占父容器的比例 */
  position: relative;
  padding-top: 50%; /* 宽高比=高度/宽度，1:1比例就设50%，2:1设100%，1:2设200% */
}

/* 图标元素占满容器 */
.example {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图标完整显示，不裁剪；用cover则填满容器但可能裁剪 */
}

这个方法几乎兼容所有浏览器，适合需要支持旧版本浏览器的场景。

方法3：针对图片图标直接设置 object-fit #

如果你的图标是<img>标签，直接用object-fit配合height: auto也能解决：

.example {
  width: 50%;
  height: auto; /* 让高度随宽度自动缩放 */
  object-fit: contain; /* 确保图片比例不变，完整显示 */
}

或者限制最大尺寸，避免图标过大：

.example {
  max-width: 200px; /* 图标最大宽度 */
  max-height: 200px; /* 图标最大高度 */
  width: 100%;
  height: auto;
  object-fit: contain;
}

为什么原有方案失效？ #

当你同时设置width: 50%和height: 100%时，宽度参考父元素宽度，高度参考父元素高度。比如父容器宽1000px、高800px时，图标宽500px、高800px，比例变成5:8；当窗口拉伸成宽1200px、高600px时，图标宽600px、高600px，比例又变成1:1，自然会出现拉伸变形。

内容的提问来源于stack exchange，提问作者CHRISTIAN BONE