如何将图像的高度等距离超出其全宽容器？

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容器是弹性箱，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;
}

<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 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>