如何将图像的高度等距扩展到其全角容器之外？

Question

我有一个图像想延伸到其父容器之外，就在顶部和底部，并且保持相同的距离。我可以在顶部实现此效果，但不能在底部实现。在仍然保持响应速度并将剩余内容保留在父级中的同时，如何实现这种效果？

我尝试了各种绝对定位方法，但是一直在打破网格。到目前为止，我可以使用负边距实现目前的目标，但仅次于顶部。

这是我到目前为止and here's the jsfiddle.拥有的非常基本的代码：

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin-top: -20px;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

Answer 1

在图像上使用负边距和绝对定位的另一种解决方案：

• 使用负边距偏移第二列，

• 在第二列中使用图像的绝对定位来确保高度由左列确定（因为row容器是flexbox，{{1} }是默认设置），并且

• 使用align-items: stretch保持图像宽高比。

请参见下面的演示

object-fit: cover

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin: -20px 0 -20px 0; /* negative margin */
  position: relative;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* absolute positioning */
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

定位似乎可行

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
  position: relative;
}

.col {
  width: 50%;
}

.col-image {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 50%
}

p {
  padding: 20px;
}

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

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

Answer 3

您还可以使用band元素的背景进行模拟

.band {
  background: 
    url(https://via.placeholder.com/800x450?text=fpo) calc(50% + 160px) 0/auto 100%,
    linear-gradient(#ddd,#ddd) center/100% calc(100% - 40px);
  background-repeat:no-repeat;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50%;
}

p {
  padding:40px 20px;
}

<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>