Question

我在我的视图中使用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>

这就是现在发生的事情：

即使设置了background-color:red的{{1}}，我也希望得到类似的内容：

我该怎么做？

编辑

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

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不会破坏验证

Answer 2

这是解决方案，只需将'jdbc:derby://localhost:1527/Mydb;create=true';添加到包含display:inline-block的标记即可，class="thumbnail"表示该元素只需necessary area而不是更...

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

2 个答案: