如何用width auto和height auto使图标在小屏缩放不变形？

本文共计824个文字，预计阅读时间需要4分钟。

许多人认为设置`width: auto`和`height: auto`就能实现自适应，但实际上这两个值只是让元素恢复默认的固定尺寸，并不触发响应式布局的缩放。对于图标（尤其是SVG或位图），如果原始宽度比容器宽高不一致、容器约束不足，或CSS中存在其他覆盖规则（如设置了`max-width: 100%`但没有设置`height: auto`），图标很可能会被拉伸或压缩。

SVG 图标用 viewBox + width 控制缩放最可靠

SVG 本身支持矢量缩放，前提是它有正确的 viewBox 属性（大多数现代 SVG 都自带）。