如何重置CSS的img宽度规则，使元素自带width属性值生效

解决方案 #

优先推荐（全浏览器兼容） #

通过属性选择器匹配设置了width属性的图片，单独重置宽度规则即可：

.container img {
  /* 未设置width属性的图片保持原有100%宽度逻辑 */
  width: 100%;
}
/* 匹配所有带width属性的图片，宽度自动适配原生属性值 */
.container img[width] {
  width: auto;
  /* 可选：保持图片比例避免拉伸 */
  height: auto;
}

新语法方案（现代浏览器支持） #

也可以使用CSS attr() 函数直接读取属性值，支持自定义fallback逻辑：

.container img {
  /* 优先读取width属性值作为px单位宽度，无属性时回退为100% */
  width: attr(width px, 100%);
  height: auto;
}

原方案无效原因 #

你尝试的width: unset和width: initial不生效的核心原因：

• initial会将width重置为CSS规范定义的初始值auto，但全局img {width: 100%}属于作者样式，优先级高于HTML原生属性的表现提示，所以原生属性值会被覆盖
• unset对非继承属性width的处理逻辑和initial一致，同样不会触发原生属性值的读取

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