Как сделать чтобы изображение уменьшалось вместе с экраном css
Добавил пользователь Morpheus Обновлено: 04.10.2024
Размер фонового изображения может быть изменен и масштабирован. В CSS2.1 фоновые изображения, применяемые к контейнеру, сохраняют свои фиксированные размеры. К счастью CSS3 ввел свойство background-size, которое позволяет растянуть или сжать фон. Оно идеально подходит, если вы используете методы адаптивного веб-дизайна для создания шаблонов.
Здесь можете найти разные методы:
Абсолютное изменение размера
Когда мы устанавливаем фоновое изображение, ширина и высота изображения по умолчанию устанавливаются в "auto", которое сохраняет оригинальный размер изображения. А если необходимо изменить размер изображения, могут быть использованы абсолютные измерения для установления нового размера (px, em, cm и др).
Измерения высоты могут быть применены, используя свойство background-size с абсолютным измерением.
При изменении размеров изображения пропорции (видимая область и форма отображения) должны быть сохранены. В противном случае, изображение может искажаться и терять качество.
Давайте рассмотрим пример фонового изображения с измененным размером:
Пример
Относительное изменение размера с помощью процентов
Использование процентных значений может быть довольно полезным при адаптивном дизайне. Когда используется процентное значение, размеры основываются на элементе, а не изображении. Если свойство background-size установлено как "100% 100%", фоновое изображение будет растянуто таким образом, чтобы оно заполняло всю область контента.
Пример
Но ширина фонового изображения зависит от размера контейнера. Не рекомендуется использовать проценты, когда имейте определенную ширину для контейнера.
Максимальное масштабирование размера
Когда свойство background-size установлено в значение "contain", фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.
Значение "contain" указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.
Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но размеры контейнера не могут быть больше ширины и высоты.
Пример
Заполнение фоном
Когда свойство background-size установлено в значение "cover", фоновое изображение будет масштабировано таким образом, чтобы оно заполняло всю область контента. Изображение будет масштабировано, чтобы заполнить контентную область, но оно будет обрезано, если соотношения сторон различаются.
Пример
Установление разных фонов для разных устройств
Огромное фото на большом экране будет смотреться идеально, но на экране маленького устройства оно не будет таким эффектным. Тогда зачем загрузить большое фото, если вы все равно должны уменьшить его?
Можно использовать мультимедийные запросы для отображения разных изображений на разных устройствах.
Здесь используется правило @media. В данном примере можно увидеть одно большое изображение и другое поменьше. Они установлены так, чтобы быть отображены по-разному на разных устройствах. Вы увидите результат сами если измените ширину браузера.
В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :
ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ
Примеры использования адаптивных фоновых изображений
На сегодняшний день очень популярны сайты, в которых фоновое изображение покрывает всю отображаемую область страницы.
Ниже приведены некоторые из таких веб-сайтов:
Основные понятия
Вот план нашей игры.
Используем свойство background-size для покрытия всей области просмотра
CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.
Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств
Для уменьшения времени загрузки страницы на маленьких разрешениях экрана мы будем использовать медиа-запрос, чтобы получить уменьшенную версию фоновой картинки. Но это не обязательно и можно опустить. Данная технология прекрасно работает и без этого.
Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500 на 3600px .
С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.
Оставлять такой объем для загрузки одного лишь фонового изображения не очень хорошая идея в любом случае, а в случае с мобильными устройствами это очень плохая идея. К тому же, подобное разрешение просто излишне на экранах с маленьким разрешением ( об этом я расскажу подробнее позже ).
Ниже показано все, что понадобится из разметки:
Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.
Однако эта техника сработает на любом блочном элементе ( таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.
Мы объявляем свойства элемента body следующим образом:
Самое важное свойство-значение в этом списке:
Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. ( В нашем случае этот элемент — body .)
И тут возникает неприятная ситуация с парой свойство-значение. В случае, когда фоновое изображение будет иметь меньшее разрешение, чем размеры элемента body , а случиться это может либо при отображении страницы на экранах высокого разрешения, либо же когда у вас тонны контента на странице, — браузер будет растягивать изображение.
А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения ( другими словами появляется пикселизация ):
Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .
Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.
Для того чтобы наш фон был выровнен по центру, мы объявили следующее:
Это установит масштабирующие оси в центр области просмотра.
Далее нам стоит разобраться с ситуацией, когда высота контента больше чем высота области просмотра. Когда подобное происходит — появляется скролл-бар.
Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:
Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования ( background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.
Следующие значения свойств говорят сами за себя.
Краткая запись CSS
Выше, для наглядности, я определял CSS — свойства в полном виде.
А так выглядит краткая запись:
Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.
Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки
Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.
Не поймите меня неправильно, но 114 килобайт это все равно довольно много для использования в некоторых видах веб-дизайна. И мы будем загружать эти 114 килобайт только в случае необходимости, потому как, смотря на статистику, следует находить компромиссы между дизайном для настольных и мобильных устройств.
А вот и сам медиа-запрос:
Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.
Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px ( или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.
И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.
Заключение
Весь использованный в этом руководстве код вы можете взять с GitHub .
Если и можно что-то добавить на счет этой техники, то это следующее.
Используйте вышеописанное с осторожностью, потому как файлы большого размера могут повлиять на пользовательское взаимодействие, в особенности когда пользователь не имеет достаточно быстрого соединения с интернетом. И это еще одна причина, по которой стоит устанавливать корректный цвет фона, чтобы посетитель вашего сайта смог видеть содержимое еще до того, как фоновое изображение будет полностью загружено.
Оптимизируйте ваши картинки для Веб, прежде чем использовать.
Лицензия: общественное достояние
Если вы хотите использовать код из этой статьи в своих целях — нет необходимости спрашивать, можно ли это делать; весь код размещен как общественное достояние на основе CC0 1.0 Universal .
Исходный код в репозитории GitHub repo не защищен какими либо авторскими правами. Вы можете использовать, продавать, модифицировать и распространять исходный код. Запрос на это вам не нужен.
Потяните за уголок браузера, и увидите, что блоки с превью уменьшаются не только по ширине, но и по высоте. Как такого добиться с помощью процентов не знаю, ведь проценты по ширине и высоте высчитываются относительно родительского блока и не учитывают пропорции
свойство сосредоточено на картинке, у картинки стоит ширина 100%, и она пропорционально уменьшается, и блок подстраивается под пропорции + текст, а у самих блоков ширина тоже стоит в процентах
простой пример iframe "height="100%px" 100% это величина растягивания фрэйма по странице, установи нужное тебе значение и оно будет одинаковым пропорционально экрану. Так же и с weight
Насколько я понял, высота меняется, потому что меняется высота картинки, так как меняется ширина блока. Остальное — media-запросы.
Не задавайте контейнерам ширину, равную брикпойнтам
Это решение подходит для мобильных устройств, где прокрутки нет, но не годится для десктопных браузеров, где она есть и занимает место на странице.
Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:
И посмотрим в браузере что получилось. Начнём с мобильных:
На мобильных всё как надо. Десктоп:
На десктопе появилась не только вертикальная прокрутка, но и горизонтальная. Почему?
Потому что вертикальная прокрутка отъела часть ширины окна, и для контента осталось меньше места.
На десктопе body будет меньше ширины окна, поэтому на ширине окна 600px элемент той же ширины не поместится, что и вызовет появление горизонтальной прокрутки.
Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.
Вариант с фиксированной колонкой
На макете, как правило, предусмотрены поля. Можно измерить ширину контента без учёта этих полей и использовать это значение, задав колонке выравнивание по центру.
Так контейнер, который мог бы растопырить страницу, оказывается уже, чем доступное пространство, и горизонтальной прокрутки не будет.
Простое и быстрое решение.
Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width :
Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.
Вариант с резиновой колонкой
Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body ), но задать боковые margin или padding .
Контейнер без фиксированной ширины сам подгонится под доступное пространство не вызывая горизонтальную прокрутку, и будет тянуться вместе с окном браузера.
Не забудьте ограничить ширину колонки на десктопе, чтобы страницу не ратстягивало на всё окно, если у пользователя широкий экран.
Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.
Вариант с фоном на всю ширину страницы
Например, в макете требуется что-то такое:
У шапки фон по ширине страницы, содержимое по центру.
На самом деле, вариант почти ничем не отличается от предыдущих. В случае с резиновой колонкой и паддингами, можно задать фон самой колонке, потому что она и так растянута на ширину страницы. В остальных случаях снаружи контейнера нужно просто задать обёртку, которой и будет задан фон.
Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.
Вариант с картинкой на всю ширину страницы
Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:
В этом случае ширина колонки с текстом делается с помощью какого-то из предыдущих способов, но для картинки потребуется дополнительный код.
Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:
Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:
Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:
На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:
Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.
Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .
Горизонтальная прокрутка пропала, всё работает как надо.
Итого
Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.
Читайте также: