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

Обновление: теперь Bootstrap официально поддерживает горизонтальные карты

Я создал запрос функции для этого в свое время: https://github.com/twbs/bootstrap/issues/20794. В настоящее время Bootstrap поддерживает и документирует горизонтальные карты.

Реализация Bootstrap основана на сочетании классов сетки и утилиты:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Решение практически такое же, как я использовал. Вам все еще может потребоваться внести небольшие изменения, чтобы заставить его работать так, как вы хотите, что также указано в документации: «В зависимости от содержимого вашей карты могут потребоваться дальнейшие настройки».

Исходный ответ

Я нашел один способ сделать это, используя 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 в представлении рабочего стола все еще есть некоторые дополнительные отступы из-за отступов по умолчанию в Bootstrap. По этой причине белая область немного больше, чем изображение. Для меня это не проблема, поэтому я не удалял их.

Одно решение я нашел, у меня проблемы с высотой изображения, но это уже другой вопрос... :P

Хорошо, большая проблема переизобретения чего-то, что уже готово, заключается в том, что решения, как правило, создают проблемы, когда нам нужны исходные функции, поэтому в моем решении мы просто добавили класс, который будет работать вместе с другим случаем, когда класс использовался. , поэтому, если класс «card-img-left» существует, класс «card-budy» будет иметь левое поле, пропорциональное размеру изображения, выровненного по левому краю, если класс не существует, это поле будет исходным. Это жизнеспособное решение, и оно не нарушит работу исходной системы, но его необходимо доработать...

 .card {
      overflow: hidden;
  }

    .card-img-left {
        position: absolute;
        height: auto;
        max-height: 100%;
        width: auto;
        max-width: 40%;
    }

    .card-img-left ~ .card-body {
        margin-left: 40%;
    }