Часто бывает так, что нужно аккуратно вывести изображения на сайте. И так же часто бывает, что они все разного размера, а нам надо как то привести их к одному. В нашем арсенале только css.
В данной статье расскажу как можно вывести добиться такого эффекта, что «примерно» одинаковые картинки будут выглядеть как-будто они и правда одного размера.
У меня есть 4 картинки с размерами (ширина*высота, px): 340*244, 320*236, 350*231 и 340*289.
Сразу же можно посмотреть, что у нас получится, а теперь давайте разберем как это работает.
Если наложить эти изображения друг на друга, получится примерно следующее:
По ширине максимальное значение у нас — 350px, по высоте — 289px. Мы точно выиграем, если выберем среднее значение для этих изображений: 180*120px.
На картинке светлая часть это и есть наша область размером в 180*120px, т.е. та часть, которую увидит пользователь, и именно центральную часть изображения. Таким образом мы максимально раскроем суть изображения и приведем все картинки к одному размеру.
Теперь о том, как этого добиться. Выводим ссылки:
<div class="imgs"> <a style="background-image: url(images/img01.jpg);" href="#"></a> <a style="background-image: url(images/img02.jpg);" href="#"></a> <a style="background-image: url(images/img03.jpg);" href="#"></a> <a style="background-image: url(images/img04.jpg);" href="#"></a></div> |
И стили:
div.imgs a, div.imgs a:visited{ display:block; width:180px; height:120px; background-position:center 50%; border:1px solid #CCC; } |
Смысл, думаю, здесь понятен:
- Выводим ссылку с определенным размером (width:180px; height:120px;)
- Стиль отображения делаем, как у блочного элемента (disply:block)
- И центрируем фоновое изображение (background-position:center 50% — сначала по горизонтали, потом по вертикали)
Такой подход был использован вот на этом сайте luara-art.ru.
Размер картинок не имеет значения: 0 комментариев