web-dev-qa-db-ger.com

Bootstrap/Flexbox-Karte: Bild auf dem Desktop nach links/rechts verschieben

Ich versuche, das folgende Kartenlayout mit Bootstrap 4 mit aktivierter Flexbox zu erstellen. Das Bild stammt aus meiner aktuellen Implementierung und funktioniert wie erwartet.

 Current mobile layout

Die HTML-Struktur sieht wie folgt aus:

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

Wenn ich nun auf einen größeren Bildschirm skaliere, erhielt ich folgende Ausgabe (was mit Bootstrap erwartet wird, aber keine gewünscht wird):

 enter image description here

Was ich stattdessen gerne sehen würde, ist:

 enter image description here

Meine Frage ist also, wie ich diese Art von Layout richtig implementieren kann. Ich verwende die Flex-Box, also haben Bootstrap-Spalten (col- *) immer die gleiche Höhe, was genau das ist, was ich will. Aber ich sollte die Auffüllungen zwischen zwei Spalten entfernen, dann den Inhalt beider Spalten immer auf 100% der übergeordneten Höhe ausdehnen und schließlich sicherstellen, dass das Bild sein Seitenverhältnis beibehält, sodass es aus der Mitte abgeschnitten werden sollte, wie ich es im Beispiel habe.

Ich habe gegoogelt und viele verschiedene Lösungen ausprobiert, aber alle scheinen zu komplexe oder "hackige" Lösungen zu sein. Ich frage mich also, ob es wahr ist, dass es keine einfache Möglichkeit gibt, diese Art von Layout zu implementieren ...?

Hinweis: Die Lösung muss nicht auf Bootstrap bezogen sein, die allgemeine Lösung für diese Art von Problem ist noch besser.

15
m5seppal

Ich habe einen Weg gefunden, dies zu tun, indem ich die Hintergrundgröße verwende: cover. Ich musste div anstelle von img verwenden, aber ansonsten funktioniert diese Lösung und in meinem Fall ist img nicht so notwendig. Andere Lösungen sind immer noch willkommen.

Ich habe mein HTML etwas geändert:

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

Für card-img-bottom stelle ich den Stil ein:

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

Und in der Desktop-Ansicht ändere ich die Höhe auf 100%, sodass die Höhe immer der Höhe des Kartenblocks entspricht.

In der Desktop-Ansicht gibt es noch einige zusätzliche Auffüllungen zwischen card-block und card-img-bottom, da die Bootstrap-Standardauffüllungen standardmäßig eingestellt sind. Aus diesem Grund ist der weiße Bereich etwas größer als das Bild. Für mich ist das kein Problem, also habe ich sie nicht entfernt.

 enter image description here

22
m5seppal

Eine Lösung fand ich, ich habe Probleme mit der Bildhöhe, aber das ist eine andere Frage ...: P

OK, das große Problem bei der Neuerfindung von etwas, das bereits fertig ist, ist, dass die Lösungen Probleme bereiten, wenn wir die ursprünglichen Funktionen benötigen. In meiner Lösung haben wir nur eine Klasse hinzugefügt, die mit dem anderen Fall, in dem die Klasse verwendet wurde, zusammenarbeitet Wenn also die "card-img-left" -Klasse vorhanden ist, hätte die "card-budy" -Klasse einen linken Rand proportional zur Größe des linksbündigen Bildes. Wenn die Klasse nicht existiert, wäre dieser Rand das OriginalEs ist eine praktikable Lösung und würde das ursprüngliche System nicht stören, aber es muss verfeinert werden ...

 .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%;
    }
0