Karta Bootstrap/Flexbox: przenieś obraz na lewą/prawą stronę na pulpicie

Question

Próbuję zbudować następujący układ karty za pomocą Bootstrap 4 z włączoną funkcją Flexbox. Zdjęcie zostało zaczerpnięte z mojej obecnej implementacji i działa zgodnie z oczekiwaniami.

struktura HTML jest następujący:

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

Teraz, kiedy skala na większym ekranie, mam następujący wynik (który jest oczekiwany z Bootstrap ale nie chciał jeden):

To, co chciałbym zobaczyć, to:

Moje pytanie brzmi, w jaki sposób mogę właściwie wdrożyć ten rodzaj układu? Używam flex-box, więc kolumny Bootstrap (col- *) są zawsze tej samej wysokości, co jest dokładnie tym, czego chcę. Ale powinienem usunąć podkładki między dwiema kolumnami, a następnie ustawić zawartość kolumn tak, aby pokrywały 100% wysokości nadrzędnej, a na końcu upewnij się, że obraz zachowuje proporcje, więc powinien być przycięty ze środka, tak jak w przykładzie.

Mam Googled i próbowałem wielu różnych rozwiązań, ale wszystkie z nich wydają się zbyt skomplikowane lub "hacky" rozwiązania. Zastanawiam się, czy to prawda, że ​​nie ma łatwego sposobu na wdrożenie tego rodzaju układu ...?

Uwaga: rozwiązanie nie musi być związane z Bootstrap, ogólne rozwiązanie tego problemu jest jeszcze lepsze.

Answer 1

Wymyśliłem jeden sposób, aby to zrobić, używając rozmiaru tła: okładka. Musiałem użyć div zamiast img, ale inaczej to rozwiązanie działa, aw moim przypadku img nie jest tak konieczne. Inne rozwiązania są nadal mile widziane.

zmodyfikowałem mój html trochę:

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

dla karty-img-dolny, ustawić styl:

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

A w widoku pulpitu, zmienić wysokość do 100%, a więc wysokość jest zawsze taki sam jak wysokość bloku karty.

Nadal istnieje kilka dodatkowych dopełnień między blokadą karty a dolnym widokiem karty w widoku pulpitu z powodu domyślnych wstawek Bootstrap. Z tego powodu biały obszar jest nieco większy niż obraz. Dla mnie to nie problem, więc ich nie usunąłem.