3

Background

I am creating a video gallery using the ShadowBox jQuery plugin. To do this, I am creating rows of inline images using display:inline-block. The user will be able to upload a video as well as thumbnail images to accompany the video. The thumbnail's max size is 240x160 pixels.

What I want to do is have a black border around each gallery thumbnail "slot" with the user's uploaded thumbnail residing inside of that "slot", so if the user uploads a 240x160 thumbnail, the thumbnail will fill up the "slot" completely, and if they upload a smaller image, the thumbnail will still be in the "slot" with some extra spacing around it.

Here's an example of where I am right now: http://jsfiddle.net/shaunp/HvZ5p/

The problem is that there is extra spacing below my thumbnails and I'm not sure why. If you inspect the code you will see that there is an extra 5 pixels lurking below the image and I'm not sure where it's coming from. The grey part below the image should be directly BEHIND the image so that in the case the user uploads a smaller thumbnail, there will be grey-background space around it, but for some reason it is too tall. Any suggestions?

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;
}
4

4 回答 4

4

添加vertical-align:top到您的缩略图：

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

jsFiddle 示例

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

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

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

jsFiddle 示例

于 2013-08-27T14:20:18.273 回答
3

添加vertical-align: middle;到您的图像将解决这个问题。

.thumbImg {
    vertical-align: middle;
    max-width:240px;
    max-height:160px;
}
于 2013-08-27T14:20:34.980 回答
1

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

.cell-thumb a {
    display: block;
    width: 240px;
    height: 160px;
}
于 2013-08-27T14:23:27.740 回答
1

默认情况下，图像将显示为inline-block( http://dev.w3.org/html5/markup/img.html#img-display )，这意味着它们将位于内联级别块上 - 如果您愿意，也可以位于文本行上。

将font-size和/或设置line-height为0或在这种情况下只需将图像设置为在块级别 ( display: block;) 显示。

于 2013-08-27T14:41:05.573 回答