Карта Bootstrap/flexbox: перемещение изображения влево/вправо на рабочем столе

Я пытаюсь построить следующий макет карты, используя Bootstrap 4 с включенным flexbox. Изображение взято из моей текущей реализации, и оно работает, как и ожидалось.

Структура HTML следующая:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

Теперь, когда я масштабируюсь на большем экране, я получил следующий вывод (который ожидается с помощью Bootstrap, но не нужен):

Вместо этого я хотел бы видеть:

Итак, мой вопрос: как я могу правильно реализовать такой макет? Я использую flex-box, поэтому столбцы Bootstrap (col- *) всегда имеют ту же самую высоту, что и я хочу. Но я должен удалить прокладки между двумя столбцами, а затем сделать содержимое столбцов всегда для покрытия 100% высоты родителя и, наконец, убедиться, что изображение поддерживает его соотношение сторон, поэтому оно должно быть обрезано из центра, как в примере.

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

Примечание. Решение не обязательно должно быть связано с Bootstrap, общее решение для этой проблемы еще лучше.

Ответ 1

Я понял один способ сделать это, используя background-size: cover. Мне пришлось использовать div вместо img, но в противном случае это решение работает, и в моем случае img не так необходимо. Другие решения по-прежнему приветствуются.

Я немного изменил свой html:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Для card-img-bottom, я установил стиль:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

И на рабочем столе я меняю высоту на 100%, поэтому высота всегда такая же, как высота блока-карты.

В настольном режиме по-прежнему имеется дополнительное дополнение между кард-блоком и картой-img-bottom из-за бутстрапов по умолчанию. По этой причине белая область немного больше изображения. Для меня это не проблема, поэтому я не удалял их.