Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Обертка уменьшенных картинок

Обертка уменьшенных картинок


     20.12.2013    картники    Все вопросы » Стили (CSS)    1707

вопрос
Здравствуйте.

Есть вопрос по 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>
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх