修复缩略图布局中的 div 和图像高度问题答案

【问题标题】：Fixing Div and Image Height Issue in Thumbnail Layout修复缩略图布局中的 div 和图像高度问题
【发布时间】：2014-05-15 23:09:44
【问题描述】：

我有缩略图 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%;
}

最初我的图像高度为 115 像素，因此每一行都有相同高度的图像，并且下面的文本正确对齐。有些图片变得太宽，所以我不得不限制最大宽度。

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

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

有什么想法吗？

【问题讨论】：

如果您从图像（等）信息的数据库生成页面，那么您可以存储图像的尺寸并在每个图像的代码中计算 CSS padding基础。

标签： css image html vertical-alignment

【解决方案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;），并在img 本身上设置vertical-align: middle;。 Updated example including this fix here.

【讨论】：

这很棒！唯一的问题是一些图像现在位于 Div 的顶部。有什么方法可以将它们放在底部（靠近文本），但除了手动将其添加到一些图像之外还要稍微填充一下？示例 Calypso 和 Metro Banquettes - 请注意它们如何位于 div 的顶部并且远离文本。 test.pillarsoflifebook.com/banquettes/designer-banquettes
@user40823 啊，是的。垂直对齐总是一件棘手的事情，但您可以使用fix outlined here。您需要进行的两个关键调整：将line-height: 115px;（即与包含元素的高度相同）添加到锚点，并将vertical-align: middle; 添加到img 本身。 Updated my example here，我也会将其编辑到我的答案中！
非常感谢！看起来很棒！

【解决方案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?的回答

【讨论】：