Gleiche Höhe Bilder in Flexbox

Question

Ich versuche, eine Reihe von Flexboxen mit einem Bild und Text darunter zu erstellen. Ich möchte, dass alle Bildhöhen übereinstimmen, aber alle Quellbilder sind unterschiedlich groß.

Ich suchte hier und found this im Wesentlichen das gleiche Problem, aber die Lösung scheint nicht für mich arbeiten.

Hier ist, was ich habe:

CSS:

.roster { 
    display: flex; 
    flex-wrap: wrap; 
} 

.roster-card { 
    display: flex; 
    flex-direction: column; 
    margin: 10px; 
    border: 1px solid grey; 
    box-shadow: 1px 1px 3px #888; 
    width: 100%; 
} 

.roster-card img { 
    width: 100%; 
    height: auto; 
} 

.roster-card-content { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    padding: 1.4em; 
} 

HTML:

<div class="roster"> 
    <div class="roster-card"> 
     <img src=""> 
     <div class="roster-card-content"> 
      <h3>Name</h3> 
      <p>Title</p> 
      <p>Location</p> 
      <p><a href="">Link</a></p> 
     </div> 
    </div>  
    <div class="roster-card"> 
     <img src=""> 
     <div class="roster-card-content"> 
      <h3>Name</h3> 
      <p>Title</p> 
      <p>Location</p> 
      <p><a href="">Link</a></p> 
     </div> 
    </div>  
    <div class="roster-card"> 
     <img src=""> 
     <div class="roster-card-content"> 
      <h3>Name</h3> 
      <p>Title</p> 
      <p>Location</p> 
      <p><a href="">Link</a></p> 
     </div> 
    </div> 
</div> 

Media Queries (wenn es darauf ankommt):

@media all and (min-width: 40em) { 
    .roster-card {width: calc(30% - 10px);} 
    .roster-card p, .roster-card p a {font-size: 0.9em; line-height: 120%;} 
} 

Answer 1

Sie haben wollen entspricht der Höhe für jedes Bild s?

Nun, Sie schreiben height : auto so die Höhe ist die normale Höhe des Bildes. Sie sollten zum Beispiel eine Höhe definieren: height: 200px. Im Moment Ihr Bild verformen führen, dass Sie eine Breite und eine Höhe definieren, sollten Sie wissen Verwendung object-fit : contain oder object-fit : cover Anteil zu halten