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

我有这种（简化的）情况：

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

这样，我的

.page content

div中总是有一个填充（它包含的内容比我在这里复制的内容多得多）。图像的宽度不能超过页面的宽度（减去填充）

它适用于任何屏幕大小

例如：

但是，我希望在手机屏幕上显示全宽图像（绕过父级20px填充）

i、 e:

如果父级（the

）有负边距（

边距：0-20px；

），我可以解决我的问题，但是html文件是由Jekyll从标记文件生成的，我不能在其中添加类

除了删除

.page content

的填充并在每个孩子身上设置外，我找不到其他方法来实现这一点。我宁愿不这样做

我也不能设置一个固定的宽度，因为我想在每一个屏幕大小上都使用

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

---

谢谢。

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

---

备选方案：可以在图像上使用定位，例如位置：绝对；这将使它脱离其父对象的流，因此忽略填充，但是您必须确切地知道图像需要放在哪里。选项1是更好的。

以及上面的建议，您可以改变依赖于设备连接的CSS（不确定您使用的是什么环境）或者取决于屏幕的宽度（如果您需要考虑屏幕大小等）。 i、 e.
@媒体屏幕和屏幕（最大宽度：400px） { p{margin:0-20px；} }

---

您可能希望比p更具体一些。

图像的行为方式很奇怪。我试图完成同样的事情，但发现很难。取而代之的是，我用一个div来包装图像，并添加了框大小：border box和margin:0-@您的负边距

<div><img /></div>


div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 -1rem;
}

div > img {
  width: 100%;
  margin: auto;
}

div{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
保证金：0-1rem；
}
div>img{
宽度：100%；
保证金：自动；
}

我将calc放在左边和右边空白处，因为如果浏览器没有实现calc功能，它不会破坏设计。

使用并添加@media查询，以保留中到大屏幕的空白：

@media screen and (min-width: 600px) {
  .img-wrapper {
    margin: 0 0;
  }
}

---

同样，放置

宽度=100%

在你的img上。

你能控制img的来源吗，比如说在末尾添加一些东西，比如=“？fff”如果是，请检查该链接，这不会停止图像caching。解决这个问题，我不能添加类来针对这个用例（我不一定是标记的作者）。是的！这太棒了。

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

@media screen and (min-width: 600px) {
  .img-wrapper {
    margin: 0 0;
  }
}