见下图。我希望内容一直延伸到圆角。
请注意,此内容不仅仅是图片,还可以包含叠加层(.item-screen)
Markup看起来像:
<div class="col-sm-6">
<div class="thumbnail">
<div class="item-picture">
<a href="blah">
<img src="blah" class="img-responsive"/>
</a>
<div class="item-screen"></div>
</div>
<div class="caption">dark picture</div>
...
</div>
答案 0 :(得分:1)
当您组合一个简单的example并使用某些浏览器工具时,您会看到应用于4px
的小填充div.thumbnail
。要将图片扩展到边框,请删除该填充
div.thumbnail {
padding: 0;
}
如果你想将填充保持在底部,你可以
div.thumbnail {
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
并且image有圆角
<img src="..." class="img-rounded"/>
答案 1 :(得分:0)
在Olaf指出我可以移除填充
之后再看一眼我最终应用了以下CSS:
.item a img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 0px solid transparent;
}
.item .thumbnail { padding: 0px; }
之前我尝试添加边框半径,但直到我意识到你可以制作一个透明的边框,它看起来很难看