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

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


     20.12.2013    Стили (CSS)    1467

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

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

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