居中图像并裁剪它答案

【问题标题】：Center image and crop it居中图像并裁剪它
【发布时间】：2011-10-05 15:46:39
【问题描述】：

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

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

}

它工作正常，但我从顶部裁剪图像，但我想居中图像，然后从顶部和底部裁剪它。我该怎么做？

【问题讨论】：

标签： image html center hidden crop

【解决方案1】：

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

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

【讨论】：

但是如果图片大小不同怎么办？正如我所理解的那样，作物是静态的
更改图像时更改剪辑值

【解决方案2】：

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

【讨论】：

【解决方案3】：

只需添加：

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

到您的 .slideshow img 类

这应该可行。

【讨论】：