html - 如何在 overflow hidden 的情况下将缩略图居中？

Question

我有一个大小不一的缩略图网格。他们所在的 div 都设置为 50px x 50px，溢出:隐藏。我想在 50px x 50px div 中居中并垂直对齐图像，以便可见的一小部分图像大部分位于图像的中心。我需要这样做的原因是在我正在制作的网站上有很多这些小缩略图，有些是横向的，有些是纵向的，因此图像本身的大小必须设置为比宽度更大的宽度div的。

这里有一个 fiddle 来演示http://jsfiddle.net/rabelais/6trNw/

.thumbnail-wrapper {
height: 50px;
margin: 7px;
overflow: hidden;
width: 50px;
}
.thumbnail-wrapper img {
width: 95px;
}



<div class="thumbnails">

<div class="thumbnail-wrapper"><img  src="http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-2.jpeg "alt="yoga 1"></div>
<div class="thumbnail-wrapper"><img src="http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-3.jpeg" alt="Poplin 2 "alt="yoga 2"></div>
<div class="thumbnail-wrapper"><img src="http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-4.jpeg" alt="Poplin 3 "alt="yoga 3"></div>
<div class="thumbnail-wrapper"><img src="http://intelligen.info/images/Commercial%3ACommissions%3AClients/yoga/Screen Shot 2014-05-01 at 10.08.10.png" alt="yoga 4"></div>
</div>

Answer 1

在不更改标记的情况下，我看到您已为容器 div 和 指定了一个固定大小 imgs，您绝对可以使用对大小的小百分比计算来定位图像。

演示:http://jsfiddle.net/abhitalks/6trNw/1/

.thumbnail-wrapper {
    height: 50px;
    margin: 7px;
    overflow: hidden;
    width: 50px;
    position: relative;
}
.thumbnail-wrapper img {
    width: 95px;
    position: absolute;
    top: -40%; left: -40%;
}

如果您的尺寸不固定，那么最好的办法是使用图像作为 SW4 回答的 background-image。