Как расширить эквидистантную высоту изображения за пределы его полноразмерного контейнера?

Question

У меня есть изображение, которое я хотел бы расширить за пределы родительского контейнера, просто сверху и снизу, на одинаковое расстояние.Я могу добиться этого эффекта сверху, но не могу сделать это снизу.Как я могу добиться этого эффекта, оставаясь при этом отзывчивым и сохраняя оставшийся контент внутри родительского?

Я пробовал различные методы абсолютного позиционирования, но продолжал ломать сетку.Я смог достичь того, что у меня есть, используя отрицательные поля, но только сверху.

Это самый базовый код, который у меня есть , а вот 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, а 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, чтобы смоделировать этот

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

Answer 3

Позиционирование работает

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