html - 将缩略图区域调整为图像和文本

Question

我在我的 View 中使用了 thumbnail class，但我需要缩小 thumbnail 区域以正好适合我的图像和文本，我该怎么做？这是我的代码:

<div class="row">
     <div class="col-xs-6 col-md-6">               
                        <a href="#" class="thumbnail thumbnailBorder" style="background-color:red">
                            <img src="~/LIGAppsForWebsite/@item" style="height:133px; width:213px;" alt="@temp">
                            @temp
                        </a>              
            </div>
</div>

这就是现在发生的事情:

即使设置了 class:thumbnail 的 background-color:red ，我也想得到这样的东西:

我该怎么做？

编辑

我不希望光标句柄在我悬停在红色表面上方时显示，我只希望它在我悬停在图像和文本上方时显示

Answer 1

试试这个:

HTML:

<div class="row">
    <div class="col-xs-6 col-md-6">               
        <a href="#" class="thumbnail thumbnailBorder">
            <img src="~/LIGAppsForWebsite/@item" alt="@temp">
            <p>Image Text</p>
        </a> 
    </div>
</div>

CSS:

.thumbnail {
    width: 213px;
    display: block;
    margin: 0 auto;
    padding: 0;
}

.thumbnail:hover {
    background-color:red;
}

.thumbnail img {
    width: 213px;
    height: 133px;
}

.thumbnail p {
    margin: 10px 0;
    text-align: center;
}

演示:jsfiddle

注意:HTML5 accepts nested tags在不破坏验证的 anchor 元素中