允许图像在div中水平溢出

Question

我有一个网格部分，我在其中显示帖子并显示照片和文本。然而，没有照片是相同的大小，这是不可避免的，所以我试图让他们相同的大小。我切入追逐，问题是width:auto;横向延伸图像。

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

有没有什么办法让图像的宽度溢出然后隐藏它？

Answer 1

短期和直接的答案

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

Answer 2

使用

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

eventhoug即犯规支持object-fit