Как изменить пропорции картинки css

Категории:CMS
Теги:,
Владимир Вокстермен

Всем привет!

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

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

Исходная позиция:

Как изменить пропорции картинки css

Код HTML (менять не будем):

Код СSS:

Владелец сайта, тема которого особенно актуальна каждое воскресенье, просит сделать так, чтобы картинка не сжималась по горизонтали.

Первый вариант: задать height: auto для миниатюры. Таким образом код CSS станет следующим:

Картинки примут следующий вид:

Как изменить пропорции картинки css

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

Зададим необходимые пропорции картинки с обрезкой (css image crop). Для этого к первоначальному стилю добавим одно свойство:

Код СSS:

Результат:

Как изменить пропорции картинки css

Что и требовалось получить. Всем успехов!

Поставьте оценку автору!

Для меня это невероятно важно, а у вас займёт всего лишь один клик.

УжасноПлохоСреднеХорошоОлтично! (3 оценок)
Как изменить пропорции картинки css
Загрузка...

Добавить комментарий

Ваше сообщение*

Имя*
Email*
Сайт