Question

我需要在垂直框内（例如600 X 400）中心裁剪景观图像。我有以下html代码，其中包含用于中心裁剪的css代码。但输出图像不是中心裁剪的，也会被拉伸。

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

中心裁剪图像

1 个答案: