如何使图像完全出血但填充内容答案

【问题标题】：How can I make the image full bleed but pad the content如何使图像完全出血但填充内容
【发布时间】：2021-05-20 05:41:37
【问题描述】：

我的 HTML 标记主要是段落、uls 和标题。我无法编辑标记，但我想将内容填充 40 像素，但将图像设为全宽，左 -40 像素，右 -40 像素。

在没有 jQuery 的情况下实现这一目标的最佳方法是什么？

p,
h2 {
  padding: 0 40px;
}

img {
  margin-left: -40px;
  width: 100%;
}

<p>But how? Genius in the Sperm Whale? Has the Sperm Whale ever written a book, spoken a speech?</p>

<p>Champollion deciphered the wrinkled granite hieroglyphics. But there is no Champollion to decipher the Egypt of every man's and every being's face.</p>
<p><img src="https://i.picsum.photos/id/163/536/354.jpg?hmac=n2PYO9vvS48HLf1RW7MB27ZvPxK5nhLT3sTTcVIqDtw" /></p>
<h2>If the Sperm Whale be physiognomically a Sphinx</h2>

<p>In the full-grown creature the skull will measure at least twenty feet in length. Unhinge the lower jaw, and the side view of this skull is as the side of a moderately inclined plane resting throughout on a level base.</p>

<p>It is plain, then, that phrenologically the head of this Leviathan, in the creature's living intact state, is an entire delusion.</p>

布局很流畅，所以如果可以的话，我真的不想固定宽度。

【问题讨论】：

去掉margin-left:-40px，试试

标签： css

【解决方案1】：

您只需要修改您的 CSS 即可：

p, h2 {
    padding:0 40px 0 40px; /*Just so that we can see why I added the 80px. (top, right, bottom, left)*/
}

img {
    margin-left: -40px; /*-40px to make up for the parent's padding to the left*/
    width: calc(100% + 80px); /*You need to change to this.*/
}

【讨论】：

【解决方案2】：

如果您不知道填充量，这里有更通用的解决方案。不管你有多少填充。

img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

p,
h2 {
  padding: 0 40px;
}

img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

<p>But how? Genius in the Sperm Whale? Has the Sperm Whale ever written a book, spoken a speech?</p>

<p>Champollion deciphered the wrinkled granite hieroglyphics. But there is no Champollion to decipher the Egypt of every man's and every being's face.</p>
<p><img src="https://i.picsum.photos/id/163/536/354.jpg?hmac=n2PYO9vvS48HLf1RW7MB27ZvPxK5nhLT3sTTcVIqDtw" /></p>
<h2>If the Sperm Whale be physiognomically a Sphinx</h2>

<p>In the full-grown creature the skull will measure at least twenty feet in length. Unhinge the lower jaw, and the side view of this skull is as the side of a moderately inclined plane resting throughout on a level base.</p>

<p>It is plain, then, that phrenologically the head of this Leviathan, in the creature's living intact state, is an entire delusion.</p>

也适用于max-width 容器。

p,
h2 {
  padding: 0 40px;
}

p {
  max-width: 300px;
  margin: 0 auto;
}

img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

<p>But how? Genius in the Sperm Whale? Has the Sperm Whale ever written a book, spoken a speech?</p>

<p>Champollion deciphered the wrinkled granite hieroglyphics. But there is no Champollion to decipher the Egypt of every man's and every being's face.</p>
<p>
<img src="https://i.picsum.photos/id/163/536/354.jpg?hmac=n2PYO9vvS48HLf1RW7MB27ZvPxK5nhLT3sTTcVIqDtw" /></p>
<h2>If the Sperm Whale be physiognomically a Sphinx</h2>

<p>In the full-grown creature the skull will measure at least twenty feet in length. Unhinge the lower jaw, and the side view of this skull is as the side of a moderately inclined plane resting throughout on a level base.</p>

<p>It is plain, then, that phrenologically the head of this Leviathan, in the creature's living intact state, is an entire delusion.</p>

【讨论】：