Автомасштабирование изображений

Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, основной контент и т.п.) можно сделать адаптивной ширины, менять их положение, скрывать при достижении определенных размеров. Как быть с картинками, которые всегда имеют конкретный фактический размер?

Адаптация картинки по ширине.

Если адаптироваться должна только ширина, рецепт очень прост.

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

Адаптация картинки по ширине и высоте.

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

cover-image-size

На картинке показано одно и тоже изображение, выведенное в трех разных контейнерах. Масштаб разный, пропорции сохраняем. Этот фокус стал очень простым благодаря CSS версии 3, где появился токен background-size. В данном примере я использую

А вот полный код примера, если вы пожелаете выполнить собственные эксперименты. Картинку можете подставить свою :).

Написать комментарий

Мало букафф? Читайте есчо !

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

 

Комментарии к «Автомасштабирование изображений»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: