How to make images get cut off

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

See On the first image how the girls head and legs are cut off because the image is too long for the square. How can I make it so that it cuts them both off and centers it? Or if it it too wide it will cut the sides off?

Answer 1

Assuming an HTML structure like this:

<div>
    <img />
</div>

Use this css:

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

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

Or, you could set the image as a background image and use background-size: cover