DEMETR Создание сайтов в Казани

Опубликовано

Размер картинок не имеет значения

Трюк с картинками cssЧасто бывает так, что нужно аккуратно вывести изображения на сайте. И так же часто бывает, что они все разного размера, а нам надо как то привести их к одному. В нашем арсенале только 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 комментариев