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

Posted 2023-03-06

【中文标题】CSS中宽度为100％的图像上的负边距

【英文标题】：Negative margin on an image with a 100% width in CSS

【发布时间】：2013-10-08 14:40:23

【问题描述】：

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

<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-content div 中总是有一个填充（它包含的内容比我在这里复制的要多得多）。图片不能超过页面宽度，减去填充。

它适用于任何屏幕尺寸。

例子：

但是，我想在手机屏幕上使图像全宽（绕过父级 20px 填充）。

即：

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

除了删除.page-content 的填充并将其设置在每个孩子身上之外，我找不到这样做的方法。我宁愿不这样做。

我也无法设置固定宽度，因为我希望它适用于每种屏幕尺寸。

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

谢谢。

【问题讨论】：

你能控制img的来源吗，说在最后添加一些像="?fff" 如果是的话检查那个链接link请不要停止图像缓存

【参考方案1】：

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

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

【讨论】：

绝对定位是多余的。

【参考方案2】：

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

即 @media 屏幕和（最大宽度：400px） p 边距：0 -20px;

您可能希望比 p 更具体。

【讨论】：

这就是问题所在，我无法针对这个用例添加类（我不一定是markdown的作者）。

【参考方案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;

【参考方案4】：

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

我将 calc 放在左右边距中，因为如果浏览器没有实现 calc 函数，它不会破坏设计。

【讨论】：

是的！这太棒了。

【参考方案5】：

使用the accepted solution from here 并为大中型显示器添加@media 查询以保持边距：

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

另外，将width=100%; 放在你的图片上。