居中图像并裁剪它

Question

我想将图像放入div元素中，图像小得多，隐藏或裁剪div元素之外的图像。我这样做了这个：

.slideshow img {
    width: 250px;
}
.slideshow {
    overflow: hidden;
    height: 170px;
    width: 250px;
    position:relative;

}

它工作正常，但我从它的顶部对作物进行成像，但我想将图像居中，然后从顶部和底部裁剪。我怎么能这样做？

Answer 1

使用css的clip属性作为图像或设置相对于负左和上位置的位置

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

Answer 2

您只能将图像垂直居中于至少与图像一样高的线条中。因此，诀窍是将图像置于一个非常高的div中，然后使用相对定位使div相对于原始div居中。内部div上需要的CSS类似于vertical-align: middle; line-height: 850px; position: relative; top: -340px;。

Answer 3

只需添加：

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

到你的.slideshow img class

这应该有用。