如何使图像被截断

Question

http://s1167.photobucket.com/user/unlivedgears/media/image-8.jpg.html?sort=3&o=1

http://s1167.photobucket.com/user/unlivedgears/media/image-9.jpg.html?sort=3&o=0

请参见第一张图片中女孩的头部和腿部是如何被剪掉的，因为图片对于正方形来说太长了。我怎样才能使它既切断它们又使它们居中？或者如果它太宽，它会切断两侧？

Answer 1

假设 HTML 结构如下：

<div>
    <img />
</div>

使用这个 css：

div{
    height: 100px;
    width: 80px;
    overflow: hidden;
}

img{
    min-height: 100%;
    min-width: 100%;
}

或者，您可以将图像设置为背景图像并使用background-size: cover