css - 允许图像在 div 中水平溢出

Question

我有一个网格部分，我在其中显示帖子并显示照片和文本。然而，没有照片是一样大小的，这是不可避免的，所以我尽量让它们大小一样。我切入正题，问题是 width:auto; 水平拉伸(stretch)图像。

<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

使用

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

eventhoug ie 不支持 object-fit