См. Изображение ниже. Я хотел бы, чтобы контент расширялся до закругленных углов.
Обратите внимание, что это содержимое не просто изображение и может включать в себя наложение (.item-screen)
Разметка выглядит так:
<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>
Принял еще один взгляд после того, как Олаф указал, что я могу удалить прокладку
Я закончил с применением следующего CSS:
.item a img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 0px solid transparent;
}
.item .thumbnail { padding: 0px; }
Раньше я пытался добавить радиус границы, но до тех пор, пока я не понял, что вы можете сделать прозрачную рамку, она выглядела потрясающе
Когда вы собрали простой пример и используете некоторые инструменты браузера, вы увидите небольшое дополнение 4px
применяемое к div.thumbnail
. Чтобы увеличить изображение до границы, удалите это дополнение
div.thumbnail {
padding: 0;
}
Если вы хотите сохранить прописку внизу, вы можете сделать
div.thumbnail {
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
и изображение с круглыми углами
<img src="..." class="img-rounded"/>