如何使用CSS控制大图片显示尺寸 无需在HTML中设置尺寸属性

排查与解决方法 #

• 先确认样式覆盖问题
  你写的.logo img选择器权重（类+标签，权重值0011）高于全局img标签选择器（权重值0001），正常情况下可以覆盖全局样式生效。如果规则没生效，先打开浏览器F12开发者工具，选中logo图片，查看样式面板：如果.logo img对应的max-width:150px被划了横线，说明有更高优先级的规则覆盖了它，优先检查是否有其他位置的img样式加了!important标记。
• 调整宽度属性写法
  如果你的需求是固定logo显示宽度，不需要根据父容器自适应缩小，直接把.logo img里的max-width:150px改成width:150px即可，全局img设置的height:auto会自动继承，保证图片等比缩放不会变形。
• 检查CSS引入顺序
  如果你的logo样式写在公共重置样式、全局样式之前，后加载的样式会覆盖前面的规则，把logo相关的样式移到CSS文件末尾即可解决。

/* 调整后的logo样式示例 */
.logo img {
  justify-self: center;
  align-self: center;
  width: 150px; /* 把max-width改成width即可固定大小 */
}

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