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

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

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

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

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

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

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

cover-image-size

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

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

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

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

100vh не корректно работает для мобильных устройств

Июль 23, 2021 г.

Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема. В интернете можно найти ...

Читать

Zoom-эффект на CSS3

Октябрь 21, 2015 г.

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

Читать

 

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

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



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