Question

背景

我正在使用ShadowBox jQuery插件创建一个视频库。为此，我使用display:inline-block创建内联图像行。用户将能够上传视频以及缩略图图像以伴随视频。缩略图的最大尺寸为240x160像素。

我想要做的是在每个图库缩略图周围都有一个黑色边框＆＃34; slot＆＃34;用户上传的缩略图位于该＆＃34;插槽＆＃34;内，因此如果用户上传240x160缩略图，缩略图将填满＆＃34;插槽＆＃34;完全，如果他们上传较小的图像，缩略图仍将在＆＃34;插槽＆＃34;周围有一些额外的间距。

以下是我现在所处位置的示例：http://jsfiddle.net/shaunp/HvZ5p/

问题是我的缩略图下方有额外的间距，我不知道为什么。如果你检查代码，你会发现图像下方有一个额外的5个像素，我不知道它来自哪里。图像下方的灰色部分应该直接在图像背后，以便在用户上传较小的缩略图的情况下，周围会有灰色背景空间，但由于某种原因它太高了。有什么建议吗？

HTML

<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>
<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>

CSS

body {
    overflow:hidden;
    margin:0 50px 0 50px;
}
.vcCaption {
    text-align:center;
    font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    color:#000;
    margin-bottom:5px;
}
.inline {
    display:inline-block;   
}
.bg-thumb {
    width:250px;
    height:170px;   
}
.bg-thumb {
    text-align:center;
    display:table;
    margin-bottom:5px;
}
.cell-thumb {
    display:table-cell;
    vertical-align:middle;
    border:5px solid #000;
    background-color:#7f7f7f;
}
.thumbImg {
    max-width:240px;
    max-height:160px;
}

Answer 1

将vertical-align:top添加到缩略图中：

.thumbImg {
    max-width:240px;
    max-height:160px;
    vertical-align:top;
}

<强> jsFiddle example

vertical-align的默认值为baseline，但根据您的需要，您可能希望图片与顶部对齐。

另一种选择是在包含div上将字体大小设置为零，如：

.cell-thumb {
    display:table-cell;
    vertical-align:middle;
    border:5px solid #000;
    background-color:#7f7f7f;
    font-size:0;
}

<强> jsFiddle example

Answer 2

在图片中添加vertical-align: middle;即可解决此问题。

.thumbImg {
    vertical-align: middle;
    max-width:240px;
    max-height:160px;
}

Answer 3

默认情况下，锚标记是一个内联元素，它为它提供了额外的间距，将其设置为一个块元素并给它一些宽度和高度！

.cell-thumb a {
    display: block;
    width: 240px;
    height: 160px;
}

Answer 4

默认情况下，图片会显示为inline-block（http://dev.w3.org/html5/markup/img.html#img-display），这意味着它们会位于内嵌级别块 - 或文本行（如果您愿意）。

将font-size和/或line-height设置为0，或者在这种情况下，只需将图片设置为以块级别显示（display: block;）。

我的内嵌图像下方的额外间距

背景

HTML

CSS

4 个答案: