CSS中img标签无法继承父元素width属性的问题排查

嘿，这个问题其实和CSS继承规则以及元素默认行为有关，我来给你拆解清楚：

核心原因：继承的是直接父元素的宽度，而非上层祖先元素 #

你的图片(.post img)的直接父元素是.post，不是#content。CSS的inherit关键字是让元素继承直接父元素计算后的属性值，不会跳过父元素去继承更上层的祖先。

看你的代码，.post没有设置width属性，所以它的宽度是块级元素的默认值auto——也就是会占满父容器（#content）的可用宽度（580px）。但auto是特殊的计算值，不是具体像素数，所以当你给img设置width: inherit时，它继承的是.post的auto宽度，这就相当于让图片使用自身的原始宽度（如果原始宽度大于580px，自然会超出容器）。

而直接给img设置width: 580px时，相当于强制指定了固定宽度，图片会缩放到这个尺寸，自然不会超出#content的范围。

几种可行的解决方案 #

方案1：让.post继承#content的宽度 #

给.post也加上width: inherit，这样.post会继承#content的580px宽度，img再继承.post的宽度就会生效：

.post {
  padding: 50px 0 15px 0;
  border-bottom: 1px solid #dfdfdf;
  width: inherit; /* 新增这行 */
}
.post img {
  width: inherit;
}

方案2：给图片设置width: 100% #

这是更常用的方式，让图片占满直接父容器的宽度，而.post的默认宽度就是#content的宽度，图片会自动适配容器：

.post img {
  width: 100%;
}

方案3：使用max-width: 100%（推荐） #

这个方案更灵活：如果图片本身宽度小于容器，不会被拉伸；如果图片宽度大于容器，会自动缩小到容器宽度，同时保留原始比例：

.post img {
  max-width: 100%;
  height: auto; /* 避免图片变形 */
}

内容的提问来源于stack exchange，提问作者Alexander Hör