Responsive Karte Bild mit fester Höhe in Bootstrap 4

Question

Ich habe ein Bild mit einer Auflösung von 760x270, zum Beispiel, aber dieses Verhältnis macht es zu dünn aussehen und ich will es eher wie ein Quadrat aussehen. Wenn ich jedoch ein quadratischeres Bild mit einer Auflösung von 760x500 anlege, möchte ich, dass es immer noch passt und nicht verzerrt. Wie kann ich das machen?

<div class="col-xs-6 col-md-4"> 
         <div class="card"> 
          <img class="card-img-top img-fluid" src="img/1.jpg" alt="Card image cap"> 
          <h4 class="card-title">Title</h4> 
          <div class="card-body"> 
           <p class="card-text">Some quick example text to build on </p> 
           10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
          </div> 
         </div> 
        </div><!--/span--> 

Answer 1

Sie ein 1 zwingen können: den „padding Trick“ 1-Verhältnis mit einer Umhüllung und dann absolut zu positionieren, das Bild in der Hülle verwendet, so dass er zentriert ist und 100% der Höhe des Umschlags einnehmen (klicken Sie auf "volle Seite", nachdem das snippet lief die Fenstergröße) einzustellen:

.wrapper { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper:after { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 

 
.wrapper img { 
 
    width: auto; 
 
    height: 100%; 
 
    max-width: none; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <div class="card"> 
 
     <div class="wrapper"> 
 
      <img class="card-img-top img-fluid" src="//placehold.it/760x270" alt="Card image cap"> 
 
     </div> 
 
     <h4 class="card-title">Title</h4> 
 
     <div class="card-body"> 
 
      <p class="card-text">Some quick example text to build on </p> 
 
      10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-md-4"> 
 
     <div class="card"> 
 
     <div class="wrapper"> 
 
      <img class="card-img-top img-fluid" src="//placehold.it/760x500" alt="Card image cap"> 
 
     </div> 
 
     <h4 class="card-title">Title</h4> 
 
     <div class="card-body"> 
 
      <p class="card-text">Some quick example text to build on </p> 
 
      10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

nicht, dass dies für ein 1: 1-Verhältnis. Um dieses Verhältnis einzustellen, berechnen Sie es als Prozent. Für 4: 3 wäre dies 3/4 = 0.75. 0.75 als Prozent wäre 75%. Sie würden dies als padding-top Wert von .wrapper:after verwenden.