html - 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 填充）。

IE ：

<p>如果父级 ( ) 有负边距 ( )，我可以解决我的问题margin: 0 -20px;，但是 html 文件是由 Jekyll 从 Markdown 文件生成的，我无法在其中添加类。

.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要好得多。

Answer 3

图像以奇怪的方式表现。我试图完成同样的事情，但发现很难。相反，我最终用 div 包装图像并添加了 box-sizing: border-box and margin: 0 -@your-negative-margin

<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;
}

Answer 4

以及上面的建议您可以根据设备连接（不确定您使用的环境）或屏幕宽度更改 css，但如果采用这种方法，您需要仔细考虑屏幕尺寸等

即
@media screen and (max-width:400px) { p { margin: 0 -20px; } }

您可能希望比 p 更具体。

Answer 5

使用此处接受的解决方案并为中到大型显示器添加 @media 查询以保持边距：

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

另外，把width=100%;你的img。