Question

我有一个不同大小的缩略图网格。他们所在的div都设置为50px x 50px，溢出：隐藏。我想在50px x 50px div中居中并垂直对齐图像，以便可见的一点点图像主要是图像的中心。我需要这样做的原因是我在制作的网站上有很多这些小缩略图，有些是风景，有些是肖像，因此图像本身的大小必须设置为宽度大于宽度的divs。

这是展示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

一种非常简单的方法是利用关闭background-size:cover和background-position:center center; CSS，但这意味着将您的图片直接移至divs的背景，它会灵活地为您提供功能你想要的。

NB。我已经将图像位置保留为内联 - 如果需要，您可以将它们移动到CSS中，但在这种情况下，我会“按原样”离开

Demo Fiddle

为什么不将您的HTML更改为：

<div class="thumbnails">
    <div class="thumbnail-wrapper" style='background-image:url(http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-2.jpeg);'></div>
    <div class="thumbnail-wrapper" style='background-image:url(http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-3.jpeg);'></div>
    <div class="thumbnail-wrapper" style='background-image:url(http://intelligen.info/images/Commercial%3ACommissions%3AClients/Poplin/-4.jpeg);'></div>
    <div class="thumbnail-wrapper" style='background-image:url(http://intelligen.info/images/Commercial%3ACommissions%3AClients/yoga/Screen Shot 2014-05-01 at 10.08.10.png);'></div>
</div>

然后使用CSS：

body {
    background-color: gray;
}
.thumbnail-wrapper {
    height: 50px;
    margin: 7px;
    width: 50px;
    background-size:cover;
    background-position:center center;
}

Answer 2

在不更改标记的情况下，我发现您已为容器div和img指定了 固定大小 ，你绝对是对图像的位置使用一点百分比计算尺寸。

演示：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图片。

如何在溢出隐藏的div中居中缩略图？

2 个答案:

Demo Fiddle