Адаптивные изображения в сетке

Question

У меня есть четыре изображения, которые должны быть выровнены таким образом:

____________ 
|1 |4  | 
|_____|  | 
|2 |3 |  | 
|__|__|______| 

Они должны не иметь никакого пространства между ними, являются 100% ширины окна просмотра, а вот кикер, они должны быть отзывчивыми.

Так что мой вопрос в том, что лучше всего делать что-то вроде просто так? Использовать img-теги и точно их размер (перед загрузкой)? Использовать фоновые изображения и размер их с помощью CSS, а затем изменять их размер при изменении размера страницы с помощью JS? Какой-то другой способ?

Я должен сказать, что я использую Boostrap 3 со строками и столбцами, чтобы сделать это, но не смог сделать высоту столбца на процентную высоту.

Спасибо!

Answer 1

Вы можете использовать сетку Bootstrap модифицированную CSS и убедитесь, что естественные ширины и высоты изображений складываются правильно:

DEMO : https://jsbin.com/caramo

HTML

<div class="container"> 
    <h2>Flush Grid</h2> 
    <div class="row flush-grid"> 
     <div class="col-sm-6"> 
      <img src="http://lorempixel.com/600/400/fashion" alt=""> 
      <div class="row flush-grid"> 
      <div class="col-xs-6"><img src="http://lorempixel.com/300/400/food" alt="" ></div> 
      <div class="col-xs-6"><img src="http://lorempixel.com/300/400/city" alt="" ></div> 
      </div> 
     </div> 
     <div class="col-sm-6 row"> 
      <div class="col-xs-12"> 
      <img src="http://lorempixel.com/600/800/city" alt="" > 
      </div> 
     </div> 
     <!--/.row.flush-grid --> 
    </div> 
    <!--/.container--> 

CSS

/* Flush Grid */ 
.row.flush-grid img { 
    width: 100%; 
    height: auto; 
    float:left; 
} 
.row.flush-grid { 
    margin-left: 0; 
    margin-right: 0; 
} 
.row.flush-grid [class*="col-"] { padding:0;} 
.row.flush-grid [class*="col-"].row { padding:0;margin:0;} 

Answer 2

Один из вариантов - создать отзывчивую обертку, установить обертку относительно позиционно, а затем полностью поместить дочерние элементы обертки.

Я только что испытал это, и он отлично работал. Я установил свое тело на 100% высоту и ширину, а затем обертку до 50%. При изменении размера браузера оболочка сжимается, а также изображения, сохраняя при этом их соотношение сторон и позиционирование в группе.

CSS:

.wrapper { 

    position: relative; 
    padding-bottom: 50%; 
    width: 50%; 

} 

.one, .two, .three, .four { 

    position: absolute; 

} 

.one { 

    width: 50%; 
    left: 0; 
    top: 0; 

} 

.two { 

    width: 25%; 
    bottom: 0; 
    left: 0; 

} 

.three { 

    width: 25%; 
    bottom: 0; 
    left: 25%; 

} 

.four { 

    width: 50%; 
    bottom: 0; 
    right: 0; 
    top: 0; 

} 

HTML:

<div class="wrapper"> 

    <img src="../images/one.jpg" class="one"> 

    <img src="../images/two.jpg" class="two"> 

    <img src="../images/three.jpg" class="three"> 

    <img src="../images/four.jpg" class="four"> 

</div>