Question

我的缩略图DIVS只是一张产品名称如下的图片。这是代码：

<div class="thumbs">
<a href="LINK"><img  src="IMAGE" /></a>
<div>Product Name</div>
</div>

CSS如下：

.thumbs {
    float:left; width:210px; height:200px; text-align:center;
}

.thumbs div {
}

.thumbs img
{
    max-height: 115px;
    max-width: 100%;
}

最初我的图像高度为115px，所以每行都有相同的高度图像，下面的文字正确对齐。有些图像变得太宽，所以我不得不对最大宽度进行限制。

问题：由于图像高度不同......缩略图下方的文字在垂直位置上有所不同。我希望文本在行的同一行。

示例页面： http://test.pillarsoflifebook.com/banquettes/designer-banquettes/ *请注意前3个缩略图的高度相同..因此，它们下面的名称是对齐的

有什么想法吗？

Answer 1

你可以通过将图像包装在div（或将你的主播设置为display: block）并在该包装上设置max-height或height并设置来解决此问题它到overflow: hidden。

无论图像大小如何，

Here's a jsFiddle example都会强制缩略图块始终显示相同的内容。

修改：Updated example with some of your images。

Edit2：要垂直对齐锚点内的图像，请将锚点的line-height设置为等于其高度（在本例中为line-height: 115px;），并在{vertical-align: middle;上设置img 1}}本身。 Updated example including this fix here

Answer 2

如果您使用的是CSS3，则可以使用css3 translate属性。

根据更大的内容重新调整大小。如果您的身高较大且宽度小于容器，则宽度将拉伸至100％，并且将从两侧修剪高度。同样适用于更大的宽度。

.thumbs {
    width:210px;
    height:200px;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

.thumbs > .thumbs img {
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;
}

示例：http://jsfiddle.net/shekhardesigner/aYrhG/

来自CSS: How can I set image size relative to parent height?

的回答

修复缩略图布局中的Div和图像高度问题

2 个答案: