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

使用

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

eventhoug即不支持object-fit

Answer 2

简短明了的答案

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

允许图像在div中水平溢出

2 个答案: