Как масштабировать изображения в CSS

В этой статье поделюсь способом как масштабировать изображения в css.

Конечно-же придуман этот способ не мной - до недавнего времени я даже не знал о его существовании. Но, как писал Александр Сергеевич: «О сколько нам открытий чудных»...

Итак, как масштабировать изображения в CSS.

Обычно делал таким образом: задавал в стилях ширину в процентах, а высоту выставлял авто и всё.

Например:

img {
width: 100%;
height: auto;
}

В этом случае ширина изображения займёт 100% родительского блока, а высота будет пропорционально выставлена автоматически. HTML-код выглядел примерно так:

<div class="img">
<img src="...">
</div>

 И это прекрасно работало и работает в большинстве случаев. Даже с расчётом на адаптивный дизайн.

Но вот на днях, завершая работу по переводу самописного корпоративного сайта на адаптивный дизайн (кстати, как оказалось - увлекательнейшее занятие!), я столкнулся с необходимостью выводить несколько изображений товаров в одну линию и таких линий-строк на целую страницу. А проблема заключалась в том, что размеры у изображений разные. Несколько тысяч картинок делались в разные годы разными дизайнерами и по разным стандартам, которые периодически менялись.

И с CSS, наподобие того, что привёл выше всё это выглядело так:

Согласитесь - не очень привлекательно. По ширине изображения отлично вписываются в блок, а вот автоматически выставленная пропорциональная высота получалась разной, поскольку разными были исходные размеры изображений.

Хотя на мобильных устройствах смотрелось отлично, так-как блоки выстраивались один под другим и каждый занимал всю ширину смартфона.

Но надо было как то выкручиваться и для десктопных устройств. И первым делом я кинулся к дизайнерам, но они подтвердили, что всё делают по стандарту, а старые картинки переделывать они физически не смогут. И без того работы выше крыши. Постепенно, когда-нибудь...

Ну не ждать же действительно пока они разгребут тысячи картинок - это просто нереально. Осознав эту очевидность, я принялся искать решение. И оно нашлось!

Вот как теперь выглядит тот же блок на странице:

Всё ровно и красиво. Изображения вписываются полностью пропорционально, как по ширине, так и по высоте...

И при всём том, исходные размеры изображений могут быть абсолютно различными. Как высота, так и ширина. Это теперь не имеет никакого значения.

Ну и коль вы уже поняли, что я имею в виду, поговорим о том, как это сделать.

Как масштабировать изображения в CSS

Если помните, в первом случае изображение размещалось при помощи тега img внутри блока div.

Здесь же подход совершенно иной. CSS3 даёт нам прекрасную возможность использовать фоновое изображение блока.

Вот как выглядит стиль такого блока:

.tableimg {
width: 96%;
height:150px;
min-height:150px;
max-height:150px;
background: url("../images/014065.jpg") no-repeat;
background-size: contain;
background-position: center;
}

 Для своей задачи, как легко видеть, я жёстко задал высоту блока и определил фоновую картинку. Но самое главное тут в другом. Вся фишка заключается в свойстве

background-size: contain;

Возможен ещё вариант background-size: cover; В чём разница? В случае с cover изображение будет просто обрезано по размеру блока, а contain пропорционально вписывает изображение в блок. И HTML-код такого блока будет таким:

<div class="tableimg"></div>

 Это, так сказать, общий случай. На самом деле background: url я в стилях не прописывал - иначе у меня во всех блоках была бы одна и та же картинка .

Это свойство я определял уже в HTML-коде каждого блока отдельно. Примерно так:

.tableimg {
width: 96%;
height:150px;
min-height:150px;
max-height:150px;
background-size: contain;
background-position: center;
}

<div class='tableimg' style='background: url(тут картинка) no-repeat;'></div>

В моём конкретном случае картинку я вычислял программно динамически для каждого блока и вставлял при помощи PHP.

print "<div class='tableimg' style='background: url($ImgFile) no-repeat;'></div>";

 Это реально выдернутая строчка из кода... Но тут всё зависит от задачи.

Вот и весь способ - он меня здорово выручил. Работающий сайт, о котором я говорил, можно посмотреть вот здесь: ddwshop.com. Можно зайти в любую группу товаров и увидеть данное решение в действии.

Если кому-то такой способ пригодится, то пользуйтесь на здоровье. Удачи Вам и до встречи.

Материалы по теме:

Переезд на новый хостинг

Бесплатный онлайн конвертер файлов

Использование специальных UTM меток в ссылках

Блог вернулся на казахстанский хостинг

Плагин Clearfy – бесплатная оптимизация WordPress!

Как закрыть внешние ссылки правильно