Отзывчивая диаграмма CSS/сетка изображения

Question

Как бы вы построили гибкую сетку изображений с изображениями, различающимися по высоте и ширине. Предлагаемое решение должно быть чисто в CSS и работает в IE9 и выше.

В идеале изображения должны соответствовать назначенной им ширине, но их высоты должны иметь равные значения, до тех пор, пока они не достигнут мобильных видовых экранов. Для мобильных видовых экранов изображения будут складываться как элементы блока.

Для этого примера я использую элемент фигуры, содержащий изображение и подпись, связанную с изображением. Структура

Пример HTML:

<div> 
    <figure class="landscape"> 
    <img 
     src="http://placehold.it/750x500/e8117f/ffffff" 
     alt="" 
     > 
    <figcaption> 
     Image Caption 
    </figcaption> 
    </figure> 
    <figure class="portrait"> 
    <img 
     src="http://placehold.it/300x500/efc63e/ffffff" 
     alt="" 
     > 
    <figcaption> 
     Image Caption 
    </figcaption> 
    </figure> 
</div> 

Текущий HTML и CSS: JSFiddle

В ссылке на изображение размещены ниже:Изображения с размерами 750x500 необходимо заполнить пробел, описанный с штриховой штрих, чтобы быть равной высоте изображения с размерами 300x500.

Answer 1

Самый простой способ сделать это с Flexbox. Недостатком является то, что ie9 не поддерживает flexbox.

/* Body */ 
 

 
body { 
 
    background-color: #fff; 
 
    margin: 0; 
 
} 
 

 

 
/* Container */ 
 

 
div { 
 
    display: block; 
 
    font-size: 0; 
 
    margin: 0 auto; 
 
    max-width: 1050px; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: stretch; 
 
} 
 

 

 
/* Figure */ 
 

 
figure { 
 
    display: block; 
 
    margin: 0 auto 20px auto; 
 
    vertical-align: top; 
 
} 
 

 
.landscape { 
 
    max-width: 750px; 
 
} 
 

 
.portrait { 
 
    max-width: 300px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 95%; 
 
} 
 

 
figcaption { 
 
    background-color: #fff; 
 
    border: 1px solid #eee; 
 
    border-top: none; 
 
    border-radius: 0 0 2px 2px; 
 
    color: #888; 
 
    font: 12px arial, sans-serif; 
 
    margin-top: -4px; 
 
    padding: 10px 5px; 
 
    text-align: center; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    figure { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
    } 
 
    figure:nth-child(even) { 
 
    margin-right: 0; 
 
    } 
 
    .landscape { 
 
    width: 60%; 
 
    } 
 
    .portrait { 
 
    width: 40%; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1024px) { 
 
    /* Placeholder */ 
 
}

<div> 
 
    <figure class="landscape"> 
 
    <img src="http://placehold.it/750x500/e8117f/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="portrait"> 
 
    <img src="http://placehold.it/300x500/efc63e/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="portrait"> 
 
    <img src="http://placehold.it/300x500/efc63e/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="landscape"> 
 
    <img src="http://placehold.it/750x500/e8117f/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
</div>