CSS设置图片宽度超过183px时失效，高度可正常调节如何解决

阈值来源 #

你碰到的183px阈值，是当前.mobile-nav-img配置height: 39px + width: auto时，按原图固有宽高比自动计算出的宽度值。

常见问题与对应修复方法 #

• 自动宽度规则覆盖手动设置
  只要保留width: auto属性，手动写入的固定宽度值会被比例计算逻辑覆盖。如果要设置自定义宽度，必须删除width: auto，替换为目标宽度值，同时按需调整height的适配规则：
  固定宽度、高度自动适配比例的配置：

  .mobile-nav-img {
    display: block;
    object-fit: contain;
    width: 200px;
    height: auto;
  }
  

  同时固定宽高、避免拉伸变形的配置：

  .mobile-nav-img {
    display: block;
    object-fit: contain;
    width: 200px;
    height: 50px;
    /* 强制解除可能存在的全局最大宽度限制 */
    max-width: none;
  }
  

• 父级元素宽度约束
  你当前的.mobile-nav-link是<a>标签，默认是行内元素，无法正常撑开内部块级img的超宽需求，需要调整为行内块元素，或给父级加弹性布局：

  .mobile-nav-link {
    text-decoration: none;
    /* 支持内部img的宽度计算 */
    display: inline-block;
  }
  
  /* 如需两个图片横向排列，给父级加flex规则更稳妥 */
  .mobile-nav {
    display: flex;
    gap: 16px;
  }
  

• 全局样式限制
  多数项目会配置全局reset规则img { max-width: 100%; }，如果父级容器可容纳的最大宽度刚好是183px，手动设置的超宽值会被截断。可以打开浏览器开发者工具的Computed面板，查看width的生效规则，如果显示是max-width导致的截断，直接给.mobile-nav-img加max-width: none即可解除限制。

内容的提问来源于stack exchange，提问作者smul.hn