Erlaube Bild horizontal in einem div überlaufen

Question

Ich habe einen Rasterbereich, in dem ich Posts zeige und ich zeige Fotos und Text an. Allerdings haben keine Fotos die gleiche Größe und das ist unvermeidlich, also versuche ich, sie gleich groß zu machen. Ich schneide auf die Jagd, das Problem ist die width:auto; streckt das Bild horizontal.

<div class="item_grid item2"> 
    <div class="panel"> 
     <div style="height:50px; overflow:hidden;"> 
      <h4 class="recent-post-header"> 
       <a href="#">Title</a> 
      </h4> 
     </div> 
     <div style="height:300px; overflow:hidden;"> 
      //Problem is Here 
      <img src="/Image" alt="img_preview" style="height:100%; width:auto; " />/
     </div> 

     <div style="height:100px; overflow:hidden"> 
      <div class="clearfix post_date"> 
       <span class="pull-left">DateCreated</span> 
      </div> 
      <p>Description</p> 
     </div> 
     <p><a href="#"> Read More <i class="icon-angle-right"></i></a></p> 
    </div> 
</div> 

Gibt es eine Möglichkeit, die Breite des Bildüberlaufs zuzulassen und es dann zu verbergen?

Answer 1

Kurze und einfache Antworten

style="height:100%; object-fit: cover;" 

Answer 2

Verwendung

<img src="/Image" alt="img_preview" style="height: 100%; width: 100%; object-fit: cover" > 

eventhoug dh doesnt Unterstützung object-fit