CSS中宽度为100%的图像上的负边距

Question

我有这个(简化)情况:

<div class="page-content">
  <p>text</p>
  <p><img src="" /></p>
  <p>text</p>
  <!-- ... -->
</div>

而且:

.page-content {
  padding: 0 20px;
}

.page-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

这样,我的.page-contentdiv中总是有一个填充(包含的内容比我在这里复制的要多得多).图像不能超过页面的宽度,减去填充.

它适用于任何屏幕尺寸.

示例:

但是,我想在手机屏幕上使图像全宽(绕过父20px填充).

即:

如果父((<p>))有一个负余量(margin: 0 -20px;),我可以解决我的问题,但是jekyll从markdown文件生成html文件,我不能在其中添加类.

我找不到一种方法来做到这一点,除了删除.page-content每个孩子的填充和设置.我宁愿不这样做.

我无法设置固定宽度,因为我想要在每个屏幕尺寸上工作.

有没有办法在CSS中选择父级？还是我不知道的另一个功能？

谢谢.

Answer 1

img {
  width: calc(100% + 40px);
  margin-left: calc(-20px);
  margin-right: calc(-20px);
}

我将calc放在margin-left和right中,因为如果浏览器没有实现calc函数,它就不会破坏设计.

Answer 2

你已经回答了你自己的问题。删除填充并将其设置在子元素上。（或者在子元素上使用边距，因为这才是您真正想要的）这是最好的解决方案。

替代方案：您可以在图像上使用定位，例如position:absolute; 这会将其从其父级流中取出，因此忽略填充，但是您必须确切地知道图像需要去哪里。选项 1 更好。