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

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

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

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

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

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

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

cover-image-size

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

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

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

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

Кол-во знаков после запятой при генерации css препроцессором sass

Март 28, 2018 г.

В одном из проектов использовался SASS, но оказалось, что у другого разработчика другие настройки SASS. И конечные CSS генерировались с числами другой точности (другое кол-во знаков после запятой). Любое изменение в файле приводило к огромному ...

Читать

box-sizing: padding-box на Chrome

Сентябрь 19, 2015 г.

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-5e26fe633b56e931335026/] Во ...

Читать

 

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

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



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