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

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

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

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

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

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

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

cover-image-size

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

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

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

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

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

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

Читать

Скрыть/изменить стили выделения в HTML - псевдокласс css::selection

Март 12, 2019 г.

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

Читать

 

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

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



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