如何使图像被切断

时间:2013-04-07 18:37:23

标签: html css

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

在第一张图片上看到女孩的头部和腿部是如何被切断的,因为图像对于广场来说太长了。我怎样才能将它们切断并将其中心化?或者如果太宽则会切断两侧?

1 个答案:

答案 0 :(得分:10)

假设这样的HTML结构:

<div>
    <img />
</div>

使用此css:

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

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

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