移动端锚点图标拉伸问题求助：CSS调试无效

嘿，我来帮你搞定这个移动端图标拉伸的麻烦！先仔细看了你的代码和问题描述，发现几个可能的问题点，一步步来解决：

1. 先修复HTML的语法错误 #

你的img标签内联样式有个小bug——第二个属性前面多了个多余的引号，这会导致浏览器解析样式出错，可能是你之前修改时不小心留下的：
错误写法：

<a href="#"><img id="icon" style="max-width:100%" "max-height: 100%"></a>

修正后：

<a href="#"><img id="icon" style="max-width:100%; max-height:100%;" alt="图标描述"></a>

（顺便加个alt属性，这是网页可访问性的基本要求哦）

2. 强制保持图标宽高比（核心解决方案） #

你之前只设置了max-width和max-height，但这两个属性只是限制图片的最大尺寸，不会强制保持原图的宽高比。当移动端容器的宽高比和图标本身不一致时，浏览器就会拉伸图片来填满容器，这就是你看到的拉伸问题。

解决这个的关键是用object-fit: contain，它能让图片在容器内自适应大小的同时，严格保持原有宽高比，不会变形。修改你的媒体查询CSS：

@media only screen and (min-width: 300px) and (max-width:650px) { 
  #icon { 
    max-width:100%; 
    max-height:100%;
    /* 核心：保持宽高比，不拉伸 */
    object-fit: contain;
    /* 可选：让图标在容器内居中显示 */
    object-position: center;
  }
}

3. 检查父容器（a标签）的样式 #

有时候问题出在锚点标签<a>上，如果它没有明确的尺寸限制或者正确的显示方式，img的max-width/max-height会没有参照对象。可以给a标签加个简单的样式，确保它能正确包裹图标：

a {
  /* 让a标签能根据内容调整尺寸 */
  display: inline-block;
  /* 可选：给容器设置最大尺寸，避免图标过大 */
  max-width: 60px;
  max-height: 60px;
}

4. 建议：统一用CSS管理样式，去掉内联样式 #

内联样式容易和媒体查询的样式冲突，而且不方便调试。建议把img的内联style去掉，完全用CSS控制：

<a href="#"><img id="icon" alt="图标描述"></a>

基础CSS：

#icon {
  max-width: 100%;
  max-height: 100%;
}

@media only screen and (min-width: 300px) and (max-width:650px) { 
  #icon { 
    object-fit: contain;
  }
}

这样调整后，图标应该就能在移动端保持正常比例，不会被拉伸了。如果还是有问题，可以检查一下图标本身的尺寸是否合理，或者容器是否有其他继承的样式影响。

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