SCSS中定义的图片尺寸规则不生效但写在HTML标签中生效是何原因

• 你使用的<img>标签未填写src属性，此时浏览器不会将其识别为标准图片替换元素，会降级为普通行内元素，而行内元素默认不支持直接设置height、width属性，因此你的高度设置不生效。
• content属性原生设计用于::before、::after等伪元素的内容生成，直接作用于<img>标签属于非标准用法，不同浏览器的渲染逻辑存在差异，本身就不推荐使用。
• 当你直接给<img>添加src属性时，它会被识别为标准图片替换元素，自带可设置宽高的特性，因此高度限制可以正常生效。

下面提供3种可行的实现方案，按推荐优先级排序：

方案1：标准img类封装（最推荐，兼容性最好） #

通用类仅控制样式，不封装图片路径，符合HTML渲染标准：

.header-logo {
  height: 40px;
  width: auto; // 自动适配宽度，避免图片拉伸变形
}

调用方式：

<img class="header-logo" src="/assets/logo/logotype-blue.png" alt="logo"/>

方案2：封装图片路径到类中 #

如果需要把logo路径也封装到通用类，避免重复写src，改用普通容器元素实现：

.header-logo {
  display: inline-block; // 支持设置宽高，同时可和其他头部元素同行排列
  content: url('/assets/logo/logotype-blue.png');
  height: 40px;
  width: auto;
}

调用方式（添加无障碍属性保证可访问性）：

<div class="header-logo" role="img" aria-label="logo"></div>

方案3：兼容现有写法 #

如果一定要保留当前无src的img+content的写法，强制指定display属性即可：

.header-logo {
  content: url('/assets/logo/logotype-blue.png');
  display: inline-block;
  height: 40px;
  width: auto;
}

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