在保持页面布局的同时将图像从文本的左侧和右侧扩展到屏幕边缘？答案

【问题标题】：Extending images from left and right sides of text to edges of screen while maintaining page layout?在保持页面布局的同时将图像从文本的左侧和右侧扩展到屏幕边缘？
【发布时间】：2021-05-18 19:04:16
【问题描述】：

我正在尝试设计一种页眉样式，其中两个图像从页眉文本的任一侧开始，并向外延伸到屏幕的整个宽度。同时，标题文本的位置需要与在其下方流动的其他页面内容的位置保持左对齐，其宽度为 100%，但最大宽度为 1280px。我不希望图像被文字截断。

这是我想要实现的目标的图像： Image showing tight width screen vs. large width screen

我希望文本不会切断左右两侧看到的圆圈。

我的尝试：

我尝试使用 ::before 和 ::after 来定位这两个图像，但是，我还没有找到将这些伪元素的开始设置为文本跨度的开始和结束的方法。
我可以在包含标题文本的全角容器上设置背景图像，但随后我必须将白色背景应用于标题文本跨度，这会导致图像在其后面被切断文本——不理想。
Display:flex 让我最接近我想要的行为（左右 div 拥抱包含文本跨度的 div 的任一侧并填充屏幕空间的其余部分），但是，没有直接的方法来确保左侧文本的边缘与正文其余部分的左边缘对齐。如果我想要居中的文本，flex 解决方案可以工作，但我需要左对齐的文本。

CSS 网格是我考虑过的东西，但似乎我无法获得我想要的拥抱行为，同时仍然与页面内容很好地对齐。

谢谢！

--编辑：我试图包含一些迄今为止我得到的最佳解决方案的代码，即 display:flex。我不得不从我的源代码中简化它并且无法让它运行，不幸的是，很抱歉，因为我对在 S.O. 上发帖很新。--

body {
  margin: 0px auto;
  width: 100%;
  background-color: #333;
  }

.page-header {
  display:flex;
  background-color:#fff;
  }

  
  .left {
  flex:auto;
  background-image: url("[image]");
  background-repeat:repeat-x;
  background-position: right bottom 20px;
  }
 
 .text {
 flex:initial;
 text-align: center;
 max-width: 1280px;
 }
 
 .right {
  flex:auto;
  background-image: url("[image]");
  background-repeat:repeat-x;
  background-position: left bottom 20px;
  }


.body-content-wrapper {
  max-width: 1280px;
  padding: 2.5%;
  background-color: #333;
  }

和

<body>
  <div class=“page-header”>
    <div class=“left”>The left image</div>
    <div class=“text”><h1>The page header text</h1></div>
    <div class=“right”>The right image</div>
  </div>
  <div class=“body-content-wrapper”>
    [rest of page content]
  </div>
</body>

编辑这是我试图避免使用标题图像的图像：它在文本的任一侧被“切断”（标题中的左侧点应该从文本的左侧开始并延伸到屏幕边缘，而右侧的点应从文本的右侧开始并向右延伸到屏幕边缘）。

【问题讨论】：

您能否附上您迄今为止尝试过的代码 sn-p？这将给我们更多的机会。另外，要明确一点：看起来图像的宽度可能会发生变化，但它们的比例将始终相同？例如每个底部图像将始终占据宽度的 1/3，尽管宽度可能会发生变化。
嗨！我试图添加我得到的最接近的简化版本（使用居中文本而不是左对齐）。我没有达到可以对齐标题文本和正文内容的左边缘的版本。
哦！回答您的另一个问题：标题下方的内容类型将逐页更改，并且所有嵌套项目当前的宽度都遵循响应式三分之一网格（基于浮动，目前我尚未实现 CSS 网格）。页面标题是唯一应该“突破”网格的内容，尽管标题文本的左侧应始终与所有剩余页面内容的父容器的左边缘对齐。希望这是有道理的！

标签： css image layout flexbox background-image

【解决方案1】：

您不需要:before 和:hover。只要您知道您的max-width，那么您应该可以使用max-width 的组合，将您的左右边距设置为auto，并使用flexbox 作为图像列。

请注意，我在下面的示例中使用了max-width: 500px，因此它更适合 StackOverflow 页面。

.header {
  background-image: url(https://i.imgur.com/Iypn3mA.jpg);
  background-position: center center;
  background-repeat: repeat-x;
  background-size: 50%;
}

.header .container {
  display: flex;
}

.header h1 {
  background-color: #fff;
  padding: 0 10px;
}

.container {
  margin: 10px auto;
  max-width: 500px;
}

.columns {
  display: flex;
  flex-direction: row;
}

.columns > * {
  flex-grow: 1;
}

.columns > :not(:first-child) {
  margin-left: 10px;
}

img {
  display: block;
  width: 100%;
}

<div class="body">
  <div class="header">
    <div class="container">
      <h1>I am some variable text</h1>
    </div>
  </div>
  
  <div class="container hero">
    <img src="https://via.placeholder.com/2400x800?text=hero" />
  </div>
  
  <div class="container columns">
    <div>
      <img src="https://via.placeholder.com/1000x1000?text=1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/1000x1000?text=2" />
    </div>
    <div>
      <img src="https://via.placeholder.com/1000x1000?text=3" />
    </div>
  </div>
</div>

【讨论】：

前面那句小句子现在感觉好多了；）
谢谢（并且很好地重用了我糟糕的页面标题；））！所以，我很清楚，我现在将使用什么方法将图像插入标题中文本跨度的左侧和右侧？如果有帮助，我在帖子前面添加了一个代码示例，说明我正在尝试使用 bkg 图像来实现它。
@KRH 图像是小圆点/气泡吗？我认为这只是显示背景颜色的去向。我建议不要将图像放在左右两侧，而是使用background-image。我会更新我的代码。
@RobertAKARobin -- 谢谢！是的，这些图像是我的问题的核心——我希望它们位于标题文本的左侧和右侧，而文本不会重叠/切断它们，延伸到屏幕的整个宽度，而文本保持左对齐到页面内容容器，最大值为 1280（我想每个人都在解决页面底部附近的三个框，但我只是用它们来说明页面内容容器中可能存在的其他页面内容:)）。
@RobertAKARobin 我添加了我试图避免的效果的图像，如果有帮助的话：D

【解决方案2】：

我想出了一个使用 calc() 的解决方案

在这个例子中你不会看到点图像，但可以看到左右标题 div 允许我相对于页面标题文本的开始和结束定位背景图像，而不会被页面截断标题 div。

.header-parent {
    background-color:#fff;
    display:flex;
    padding-top: 200px;
}

.body-parent {
    position: relative;
    margin:0px auto;
    background-color: #fff;
    width:100%;
    max-width:300px;
}

article {
    padding: 10px;
}

.left-dots {
    width: calc((100% - 300px) / 2);
  background-color:#78AA56;
  background-image: url("img.png");
    background-repeat:repeat-x;
    background-position: right bottom 20px;
}

.title {
    flex:initial;
    min-height: 50px;
    margin:0 10px;
}

.right-dots {
    background-color:#CC4483;
  background-image: url("img.png");
    background-repeat:repeat-x;
    background-position: left bottom 20px;
    flex:auto;
}

<div class="header-parent">
    <div class="left-dots"></div>
    <div class="title"><h1>Page title</h1></div>
    <div class="right-dots"></div>
</div>
<div class="body-parent">
  <article>text text text text
    Body text
  Where its left margin lines up with the page title margin
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac dictum nisi. In vulputate in purus non laoreet. Nullam non ligula congue, porta lorem fermentum, feugiat urna. Quisque mollis nisl et risus malesuada vulputate. Nullam id efficitur odio, quis interdum augue. Praesent volutpat bibendum tellus, non pellentesque arcu. .</article>
</div>

【讨论】：