html - 中心裁剪图像

Question

我需要在垂直框(例如 600 X 400)内居中裁剪横向图像我有以下 html 代码和用于居中裁剪的 css 代码。但是输出图像不是中心裁剪的，它也被拉伸(stretch)了。

<div id="posts">
    <div class="image">
        <a href="#"> 
           <img src="Vasco45_barbosa.jpg">
        </a>
    </div>
</div>

 #posts .image {
    overflow: hidden;
    height: 600px;
    width: 400px;
    margin: 0 auto;
}

#posts .image img{
    background-position: center center;
    background-size: cover;
    display: block; 
    min-width: 100%;  
    min-height: 100%;  
    -ms-interpolation-mode: bicubic; 
}

Original Image
Image after applying the above css code

Answer 1

将 img css 改成这个

#posts .image img{
    object-fit: cover;
    object-position: 50% 50%; 
    width: 100%;
    height: 100%;
}

工作原理:https://jsfiddle.net/6ns549hy/