时间戳

首页 > 解决方案 > 在百分比宽度容器之外展开图像

css - 在百分比宽度容器之外展开图像

问题描述

我有一个图像，它位于文本的中心 div 内：

<div style="max-width: 64rem; margin-left: auto; margin-right: auto;">
  <p>Some text</p>
  <img style="width: 100%;" src="myimage.png">
  <p>Some more text</p>
</div>

我想有一个很好的艺术效果，图像居中，但在双方文本的父 div 之外弹出 3rem 左右。

我很想用 rem 值和负边距来做到这一点，但我基本上已经放弃尝试让它以负边距为中心。

更让我烦恼的是，我什至不能用百分比值来做到这一点，因为以下内容不起作用：

<div style="max-width: 64rem; margin-left: auto; margin-right: auto;">
  <img style="width: 120%; margin-left: -10%;" src="myimage.png">
</div>

我已经看到了一些使用视口宽度的建议，calc但它们似乎需要为父 div 设置像素值，这在这种情况下不起作用。在让图像悬垂父容器并保持一些动态宽度时，我是否遗漏了一些明显的东西？

标签： css

解决方案

我很想用 rem 值和负边距来做到这一点，但我基本上已经放弃尝试让它以负边距为中心。

如果宽度仍然是 100%，它当然不会正确居中 - 尝试将图像从两侧拖出 -3rem，并同时使其具有父级的 100% 宽度，构造一个可以没有完全被填满。

所以 - 相应地调整宽度！

<img style="width:calc(100% + 6rem); margin:0 -3rem;" src="…&quot;>

推荐阅读