Маска CSS для сетки изображения ⇐ Html

[Anonymous]

Как создать сетку изображения с изображениями, красиво выстроившимися в ряды высоты и столбцы с одинаковой шириной, давая, что мы могли бы иметь изображения различных соотношений сторон в адаптивном дизайне, в CSS? />http://destadesign.com/test/capricorn/test.html
Изображение во втором ряду выходит из сетки. вещи. Любая конкретная помощь будет высоко оценена, но также некоторые общие идеи и руководящие принципы пригодятся.

Код: Выделить всё

[url=#]
[img]images/pic_mountain.jpg[/img]

[h4]test 1[/h4]

[/url]

< /code>

css с несущественным эффектом прокачки и текстового центрирования: < /p>

.figure {
position: relative;
float: left;
width: 10%;
margin-right: 1%;
left:20px;
}
.figure a{
display:block;
width:100%;
height:100%;
position:relative;
z-index:2;
}
.figure a img{
width:100%;
display:block;
}
.figcaption {
font-size: 0.8em;
letter-spacing: 0.1em;
text-align: center;
position: absolute;
top: 0;
left:0;
width:100%;
z-index: 2;
height:100%;
background-color:rgba(0,0,0,.4);
transition:all 0.4s ease;

}
.figcaption h4{
position:absolute;
top:50%;
left:50%;
padding:0;
margin:0;
-moz-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
opacity:0;
}

Пожалуйста, используйте этот код для удобства:
http://codepen.io/anon/pen/gopqpz

Подробнее здесь: https://stackoverflow.com/questions/342 ... image-grid