居中图像并裁剪它
我想将图像放入 div 元素中，该元素比图像小得多，并在 div 元素外部隐藏或裁剪图像。我已经这样做了：
.slideshow img {
width: 250px;
}
.slideshow {
overflow: hidden;
height: 170px;
width: 250px;
position:relative;
}
它工作得很好，但我从它的顶部进行裁剪，但我想将图像居中，然后从顶部和底部裁剪它。我该怎么做？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对图像使用 css 的 Clip 属性或设置相对于负左侧和顶部位置的位置
Use clip property of css for image or set position relative with negative left and top position
您只能将图像垂直居中在至少与图像一样高的线上。因此，技巧是将图像放在一个非常高的 div 中居中，然后使用相对定位使 div 相对于原始 div 居中。内部 div 需要的 CSS 类似于
vertical-align: middle;行高：850px；位置：相对；顶部：-340px；。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;.只需添加：
到您的 .slideshow img 类
这应该可以工作。
Just add:
to your .slideshow img class
This should work.