Center image and crop it

I want to put an image into a div element, which is much smaller than the image and hide or crop image outside div element. I've done this like this one:

.slideshow img {
    width: 250px;
}
.slideshow {
    overflow: hidden;
    height: 170px;
    width: 250px;
    position:relative;
开发者_如何学运维
}

it works fine, but I image crops from it's top, but I want to center image and then crop it from top and bottom. How can I do this?

Use clip property of css for image or set position relative with negative left and top position

img 
{
clip:rect(0px,60px,200px,0px);
}

You can only vertically centre an image in a line that is at least as tall as the image. So the trick is to centre the image in a very tall div, and then use relative positioning to centre the div relative to the original div. The CSS you'll need on the inner div is something like vertical-align: middle; line-height: 850px; position: relative; top: -340px;.

Just add:

position:relative;
left:-25%;
top:-25%;

to your .slideshow img class

This should work.