Как сверстать на Bootstrap такую "композицию" из картинок?
С сеткой я разобрался вроде как мне организовать её, а вот изображения как правильно вставляются?
Если через <img>
, то картинка вылазит за края сетки при уменьшении размера экрана, не адаптивненько выходит.
А если картинку грузить в <div>
и <div>
поставить background-size:contain
, то не семантично уже, картинки ж желательно в <img>
пихать?
.class1{background: url() no-repeat; width: 576px; height: 385px; float:left; margin:5px}
.class1:hover{background: url() no-repeat;}
.class2{background: url() no-repeat; width: 274px; height: 183px; float:left; margin:5px}
.class2:hover{background: url() no-repeat; }
.class3{background: url() no-repeat; width: 274px; height: 183px; float:left; margin:5px}
.class3:hover{background: url() no-repeat;}
.class4{background: url() no-repeat; width: 274px; height: 183px; float:left; margin:5px}
.class4:hover{background: url() no-repeat; }
.class5{background: url() no-repeat; width: 274px; height: 183px; float:left; margin:5px}
.class5:hover{background: url() no-repeat; }
<div class="row">
<div class="col-lg-6 col-md-4 ">
<img class="class1">
</div>
<div class="col-lg-3 col-md-2 ">
<img class="class2">
</div>
<div class="col-lg-3 col-md-2">
<img class="class3">
</div>
<div class="col-lg-3 col-md-2 ">
<img class="class4">
</div>
<div class="col-lg-3 col-md-2 ">
<img class="class5">
</div>
</div>