вопрос
Здравствуйте.
Есть вопрос по css. Как организовать вывод сразу нескольких уменьшенных картинок разного формата (вертикальных, горизонтальных и в разных пропорциях) на одинаковом квадратном фоне отцентрованных и сверху-низу и по сторонам?
Что и куда нужно прописать, чтобы организовать thumb?
Например, максимальный размер картинки 200px, в один ряд у меня встанут три "квадрата", между квадратами растояние 7рх. Но как и куда, что-то недопираю...
Есть вопрос по css. Как организовать вывод сразу нескольких уменьшенных картинок разного формата (вертикальных, горизонтальных и в разных пропорциях) на одинаковом квадратном фоне отцентрованных и сверху-низу и по сторонам?
Что и куда нужно прописать, чтобы организовать thumb?
Например, максимальный размер картинки 200px, в один ряд у меня встанут три "квадрата", между квадратами растояние 7рх. Но как и куда, что-то недопираю...
http://cdpn.io/AkbqI
<a href="http://lorempixel.com/800/601" onclick="return hs.expand(this)"><img src="http://lorempixel.com/200/121" alt=""></a>
<a href="http://lorempixel.com/800/602" onclick="return hs.expand(this)"><img src="http://lorempixel.com/150/200" alt=""></a>
<a href="http://lorempixel.com/800/603" onclick="return hs.expand(this)"><img src="http://lorempixel.com/200/200" alt=""></a>
<a href="http://lorempixel.com/800/604" onclick="return hs.expand(this)"><img src="http://lorempixel.com/300/80" alt=""></a>
<a href="http://lorempixel.com/800/605" onclick="return hs.expand(this)"><img src="http://lorempixel.com/150/320" alt=""></a>
<style>
a[onclick="return hs.expand(this)"] {
display: inline-block;
width: 200px;
height: 200px;
line-height: 194px;
text-align: center;
}
a[onclick="return hs.expand(this)"] img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
</style>
