中心图像和裁剪它

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

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

}

它工作正常，但是从它我像庄稼的顶部，但我想中央的图像，然后从顶部底部裁剪。我怎样才能做到这一点？ CSS的图像或位置相对具有负左集和顶部位置的

来源

2011-07-14 Yekver

使用剪辑属性

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

来源

2011-07-14 19:45:57 hungryMind

但如果图片大小不同，怎么办？作物是静态的，因为我理解的权利 – Yekver

当您更改图像时更改剪辑值 – hungryMind

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

来源

2011-07-14 20:52:56 Neil

只需添加：

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

您.slideshow IMG类

这应该工作。

来源

2012-10-21 11:22:04 Rob

中心图像和裁剪它

回答

相关问题