如何仅为包含img标签的p元素设置样式实现图片撑满容器宽度

方案1：使用CSS :has() 选择器（推荐，现代浏览器兼容） #

这是最贴合你需求的实现方式，无需修改HTML结构，直接匹配所有包含<img>子元素的<p>标签：

.entry-content p:has(img) {
  margin-left: -30px;
  margin-right: -30px;
}

目前Chrome 105+、Firefox 121+、Safari 15.4+均支持该语法，覆盖90%以上的全球用户。

方案2：兼容旧浏览器的img直接设置方案 #

如果需要兼容不支持:has()的旧版本浏览器，可以直接调整图片本身的尺寸和边距，不需要修改父元素样式：

.entry-content p img {
  /* 宽度等于p元素的可用宽度+左右需补齐的60px边距 */
  width: calc(100% + 60px);
  /* 取消默认最大宽度限制 */
  max-width: unset;
  /* 左移30px抵消父容器左侧padding */
  margin-left: -30px;
}

你之前的写法失效是因为仅设置了图片的左右负边距，但图片本身的宽度还是p标签的内容宽度，所以只会左移、右侧无法撑满容器。

方案3：最优兼容性方案（兼容所有浏览器） #

如果需要兼容非常老旧的浏览器，可以手动给包含图片的p标签添加自定义类名：

<div class="entry-content">
  <p></p>
  <p></p>
  <!-- 新增自定义类 -->
  <p class="has-image"><img src="https://via.placeholder.com/300.png/09f/fff"></p>
  <p></p>
</div>

再针对该类添加样式即可：

.entry-content p.has-image {
  margin-left: -30px;
  margin-right: -30px;
}

内容的提问来源于stack exchange，提问作者Алексей Сотников