我在我的 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
,我也想得到这样的东西:
我该怎么做?
编辑
我不希望光标句柄在我悬停在红色表面上方时显示,我只希望它在我悬停在图像和文本上方时显示
最佳答案
试试这个:
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 元素中
关于html - 将缩略图区域调整为图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40679695/