it-swarm.com.de

Wie bekomme ich Bilder in der Bootstrap-Karte auf die gleiche Höhe/Breite?

Also hier ist mein Code, er zeigt 6 Karten, drei quer und zwei Reihen. Ich möchte, dass die Bilder alle dieselbe Größe haben, ohne dass die Bilder manuell angepasst werden müssen. Die Reaktionsfähigkeit funktioniert, ich verwende "img-fluid" als Klasse und wenn ich zu einem mobilen oder kleineren Browser gehe, haben sie alle die gleiche Breite, aber die Höhe ist immer noch deaktiviert. 

<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
      <div class="card-block">
        <h4 class="card-title">Brownie Delight</h4>

        <p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
      <div class="card-block">
        <h4 class="card-title">Butter Pecan</h4>

        <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
      <div class="card-block">
        <h4 class="card-title">Black Cherry</h4>

        <p class="card-text">Our classic Vanilla loaded with plump black cherries to give flavor and color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
      <div class="card-block">
        <h4 class="card-title">Mint Chip</h4>

        <p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
      <div class="card-block">
        <h4 class="card-title">Pistachio</h4>

        <p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
      <div class="card-block">
        <h4 class="card-title">More Flavors</h4>

        <p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
      </div>
    </div>
  </div>
</div>

Hier ist ein Bild von dem, was ich bekomme und das ist, was ich bekommen will wo sie alle die gleiche Größe haben.

19
Renuz

Versuchen Sie dies in Ihrer CSS:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

Passen Sie die Höhe vw an, wie Sie es für richtig halten .. /. Das object-fit: cover ermöglicht das Zoomen anstatt das Bild zu strecken.

41
sepuckett86

es ist ein bekanntes Problem

Ich denke, die Problemumgehung sollte als festgelegt werden 

.card-img-top {
    width: 100%;
}
4
maxisam
.card-img-top {
    height: 15rem;
    object-fit: cover;
}
4
Jeremy Lynch
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

Wie oben gezeigt, aber wenn Sie die Höhe hinzufügen, wird die Verwendung von "vh" (Viewport Height-Einheiten) für ein mobileres Erlebnis empfohlen.

3

Ich glaube nicht, dass Sie dies tun können, ohne sie zuzuschneiden. Ich meine, Sie könnten die Divs mithilfe von Jquery auf die gleiche Höhe bringen. Dies macht jedoch die Bilder nicht gleich groß.

Sie können einen Blick auf die Verwendung von Masonry werfen, wodurch dieser Look anständig wird.

http://masonry.desandro.com/

1
Michael Mano

Ich habe mit "manuell" die gleichen Haltepunkte in Bootstrap 4 als Medienabfragen verwendet ...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

Es funktioniert, obwohl ich mir gewünscht hätte, dass es mehr native Eingebungsmöglichkeiten dieser Art gibt.

Teilvorschlag von @ sepuckett86 und I.

1
Robert Andrews

Jedes der Bilder muss die exakten Abmessungen haben, bevor Sie sie aufstellen. Andernfalls versucht Bootstrap 4, sie in eine unkonventionelle Form zu bringen. Bootstrap hat auch so etwas wie Masonry in seinen Dokumenten, das Sie bei Bedarf verwenden können. Das können Sie hier sehen: http://v4-alpha.getbootstrap.com/components/card/#columns .

0
Renuz

Ich habe dieses Problem mit Bootstrap 4 Emdeds Utilities gelöst

https://getbootstrap.com/docs/4.3/utilities/embed

In diesem Fall müssen Sie nur ein Bild wie folgt zu einem div.embbed-responsive hinzufügen:

<div class="card">
  <div class="embed-responsive embed-responsive-16by9">
     <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
  </div>
  <div class="card-block">
    <h4 class="card-title">Butter Pecan</h4>
    <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
  </div>
</div>

Alle Bilder entsprechen dem in den Modifiziererklassen angegebenen Verhältnis:

  • .embed-responsive-21by9 
  • .embed-responsive-16by9 
  • .embed-responsive-4by3
  • .embed-responsive-1by1

Zusätzlich ermöglicht dieses CSS das Zoomen anstelle der Bildstreckung

.embed-responsive .card-img-top {
    object-fit: cover;
}
0
Pelerano