Как сделать резиновый фон css
Обновлено: 03.07.2024
Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.
Пару недель назад я опубликовал обучающее видео, в котором объяснил, как сделать адаптивный веб-сайт. В видео мы сделали изображение адаптивным. В этом посте я хотел бы рассказать об этом подробнее.
Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.
Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их с помощью CSS.
Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width. Тогда высота изображения автоматически изменится.
Важно знать, что вы всегда должны использовать относительные единицы для свойства ширины, такие как процент, а не абсолютные единицы, такие как пиксели.
Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.
Вот почему вам следует вместо этого назначить относительную единицу, например 50%. Такой подход сделает ваши изображения плавными, и они смогут изменять свой размер независимо от размера экрана.
Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.
Медиа-запрос — еще одна важная функция CSS, которая помогает сделать веб-сайт адаптивным. Я не буду вдаваться в подробности, но вы можете прочитать другой мой пост позже, чтобы узнать, как использовать медиа-запросы более подробно.
Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:
Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.
Другой способ, которым разработчики могут создавать адаптивные изображения, — это свойство max-width. Однако это не всегда лучший метод, поскольку он может работать не для всех размеров экрана и устройств.
Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.
Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).
Например, если изображение имеет ширину по умолчанию 500 пикселей, а размер вашего экрана всего 360 пикселей, вы не сможете увидеть полное изображение, потому что недостаточно места:
Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.
Хорошо то, что, поскольку вы используете относительные единицы, изображение будет плавным на любом устройстве размером менее 500 пикселей.
К сожалению, размер экрана будет несколько больше 500 пикселей, но изображение не изменится, поскольку его ширина по умолчанию составляет 500 пикселей. Такой подход нарушит отзывчивость изображения.
Другая распространенная проблема, с которой вы можете столкнуться, связана со свойством высоты. Обычно высота изображения автоматически изменяется, поэтому вам не нужно назначать свойство высоты вашим изображениям (потому что это как бы ломает изображение).
Но в некоторых случаях вам, возможно, придется работать с изображениями, которые должны иметь фиксированную высоту. Поэтому, когда вы назначаете фиксированную высоту изображения, оно все равно будет отзывчивым, но не будет хорошо выглядеть.
Я уже писал о том, что сейчас распространен такой элемент на сайте, как фоновое изображение. Чаще всего оно встречается продающих страниц, где располагается в шапке. Оно смотрится очень красиво, если, конечно, оно очень качественное и хорошо подходит к тематике сайта. Кстати, бонусом в этой статьей, в ее конце я расскажу где брать качественные изображения совершенно бесплатно и при этом они будут сделаны профессионалами.
Вот что еще есть по поводу адаптивных изображений для сайта:
Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:
Как это выглядит смотрите на реальном примере:
Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:
Как сделать адаптивное фоновое изображение для сайта?
HTML часть
Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:
CSS часть
Осталось только задать в файле стилей необходимые свойства, чтобы сделать задуманное — адаптивное фоновое изображение для сайта:
Все строки прокомментированы, поэтому я не думаю что с этим кодом могут возникнуть проблемы.
Но это еще не весь код. Так как скорость мобильного интернета ограничены, поэтому страницу нам необходимо оптимизировать в скорости загрузки. На странице находится изображение, которое достаточно большое. Но можно сделать так, чтобы для мобильных устройств загружалось другое изображение, которое меньше.
Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:
Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.
Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.
Вывод
Данный эффект очень актуален и его использование можно увидеть практически на каждой продающей странице.
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.
Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset , для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width (ширины) и значении auto для свойства height (высоты) изображений.
Базовые значения адаптивного изображения
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
HTML:
CSS:
Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Адаптивные изображения в колонках
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
HTML:
CSS:
2. Три колонки изображений
С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32% .
HTML:
CSS:
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .
HTML:
CSS:
/* Для небольших устройств (смартфоны) */ img < max-width: 100%; display: inline-block; >/* Для средних устройств (планшеты) */ @media (min-width: 420px) < img < max-width: 48%; >> /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) < img < max-width: 24%; >>
Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…
Адаптивное изображение на всю ширину экрана
Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.
CSS:
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 41
Спасибо, хорошо объяснили про колонки
Класс!
Блин очень круто, спасибо!
Все хорошо Вы описали. Но это все лучше отнести к резиновому дизайну, а не к адаптивному.
В том то и смысл чтобы на мобильных показать совсем другие изображения.
В css через backgraund-image и CSS media queries это делается легко, но в таком случае картинка при плавному уменьшении ширины браузера меняется скачками (в зависимости от того, сколько изображений мы подготовили).
Если же вставлять картинки с помощью тега как здесь описывается, то как менять картинки для разных разрешений? С помощью JS получить ширину девайса, передать из JS в PHP значение ширины девайса (перезагрузка страницы) и выводить нужную картинку с помощью HTML и PHP.
Либо же в HTML выводить несколько изображений, а через CSS скрывать ненужные из них с помощью CSS media queries. Но в этом случае грузятся лишние картинки…
А если изображение маленькое и без атрибутов ширины и высоты? Тогда как? Оно увеличивается на всю ширину дива…
Соответственно, так как базовая ширина задана в width: 100%;
В данном случае размер предопределяется с помощью свойства max-width:
А что будет с картинками, у которых высота больше чем ширина? 😉
Попробуйте и всё узнаете ))
Нужно поставить два лого по краям экрана. Шаблон адаптивный. То есть нужно, что бы на маленьких устройствах лого выводились одно под другим. Подскажите как можно это реализовать? Конкретнее как реализовать отображение двух адаптивных картинок по краям большого экрана? Как то так )))
Если совсем уж по-простецки, то примерно так: см. пример в редакторе изменяйте размер поля просмотра: тынц
Спасибо!
Наконец-то нашел то, что нужно!
Самая изящная идея. Никакой воды. Всё только по существу. Просто, доступно и понятно.
Теперь с таким инструментом и сайт будет красиво выглядеть, благо и в CSS лишь немного дополнений ввести останется и привести его к большей логике. А то поначалу, задумавшись о кросс-браузерности, боялся, что несколько типов сценариев и файлов CSS придется делать. Теперь — на одну головную боль меньше.
Еще раз Спасибо!
Здравствуйте. У меня вопрос : можно ли всё это сделать на вап ?
А как сделать на одной странице одно изображение адаптивным, адругие фиксированными. Буду признателен…
Добрый день.
А как сделать так, чтобы не было промежутков между картинками в случае условной расстановки?
Используйте отрицательное значение margin, для всех вариантов, в том числе и для условной расстановки будет примерно так:
img width: 100%;
height: auto;
margin:-3px;
>
Как вариант. Спасибо.
Спасибо за подсказку. Статья помогла решить проблему. Очень толково, даже для начинающего
Добрый день.Картинки на сайте не уменьшаются не адаптивные. Я дописал в css
img max-width: 100%;
height: auto;
Почему они не меняются под размер окна?
Мой сайт lifepc.by
Спасибо! Буду осуществлять на своем сайте!
Спасибо, отличная статья. А есть ли способ показать в контейнере не всё изображение а только его часть, обрезать его по краям, используя только css, не прибегая к обрезке самого изображения.
Добрый день! Не могу сделать изображение шапки адаптивным…Помогите пожалуйста)
Базовые значения адаптивного изображения через СSS помогло. Нуб нубом в html, вояю через дримвер 6, наконец то на мобилке картинки четко! Спасибо автору.
Здравствуйте.
Подскажите пожалуйста правильно ли я вас понял.
Каждый раз создавая страницу или запись на сайте (вордпресс) мне надо будет в каждом блоке где хочу ее вывести прописывать ее в хтмл и после стайлить ее?
Не судите строго, новичек.)
Здравствуйте.
Стили для изображений задаются и легко изменяются в style.css любой темы wordpress, как базовые, так и для отдельных блоков. Каждый раз в html прописывать ничего не нужно.
Например, прописав в .css для картинок значения width: 100%; height: auto; вы сделаете их отзывчивыми и при размещении в блоках имеющих относительные значения ширины, а это уже обязательное условие современных тем, все ваши картинки будут автоматом подстраиваться под заданный размер родителя.
Рассмотрите подробнее фарш style.css демо-страницы и надеюсь поймёте сам принцип работы, как для отдельных блоков, так и для базы.
А можно также сделать с картинками которые обернуты в div со свойством inline block
Здравствуйте. А если изображение подключено в css как его сделать адаптивным?
Здравствуйте.
Если в качестве фоновой картинки background-image: понадобятся свойства background-position: , background-repeat: , background-attachment: , background-size: и background-color: с определёнными значениями
Так как я не знаю в качестве чего вы используете изображение, подробности расписывать не берусь, дабы не тратить время в пустую
Эта статья будет интересна всем тем, кто создает сайты. Я думаю, вы не раз видели на различных веб-сайтах такой эффект, когда при разном расширении экрана фон сайта автоматически красиво растягивается по ширине и высоте монитора. Если же вы с подобным эффектом не сталкивались, рекомендую посмотреть готовый вариант, и попробовать на нем уменьшить или увеличить масштаб в самом браузере.
Итак, для начала найдите качественное изображение для фона и поместите его в корень сайта.
С помощью кода JavaScript происходит вычисление размера экрана у пользователя, который открыл ваш сайт. Вычисление размера экрана нужно для нормального показа фонового изображения.
Читайте также: