Web. Кадрирование изображений

Записка больше для себя, дабы не забыть. Столкнулся с проблемой масштабирования слайдера, а именно фон очень некрасиво подстраивался. Городить огород из wrap-слоев было лениво, да и пришлось бы переделывать часть верстки. Поэтому занялся поиском информации по кадрированию изображения в объекте <img>

Поиск, как ни странно, достаточно быстро привел к свойству «object-fit». И так, немного примеров. Исходное изображение:

css_-o-fit-object-src[1]

Применяем к нему стиль и пробуем все параметры

css_-o-fit-object-fill[1]


css_-o-fit-object-contain[1]


css_-o-fit-object-cover[1]


css_-o-fit-object-none[1]

В моем случае лучше всего, да и правильнее, наверное, смотрелось свойство cover.

Кстати, по следующей ссылке можно заказать создание сайтов :)

Вам понравиться