Как фоновые изображения работают в Avada — Конструктор веб-сайтов Avada
Перейти к содержимомуПоследнее обновление: 13 февраля 2023 г.
Поиск:
Мы регулярно получаем запросы в службу поддержки с вопросами, почему фоновое изображение обрезано или увеличено. Итак, вот некоторая информация о том, как работают фоновые изображения, чтобы помочь объяснить те ситуации, когда фоновое изображение выглядит не так, как вы ожидаете.
Все начинается с понятия соотношения сторон изображения. Это соотношение между шириной и высотой изображения. Таким образом, если изображение размером 1200 на 800 пикселей, оно имеет соотношение сторон 3:2, то есть, если бы его длина была равна 3, его высота была бы равна 2.9.0003
В этом документе мы рассмотрим добавление фоновых изображений в контейнер, а затем в столбцы.
Фоновые изображения контейнера
При добавлении фонового изображения в контейнер происходит следующее. Изображения, установленные в качестве фона в контейнерах, охватывают высоту 90 017 или ширину 90 018 контейнера при сохранении соотношения сторон; эффективно, всегда заполняя контейнер.
Но контейнеры сами по себе вообще не имеют высоты, поэтому их высоту определяет содержимое (или отступы), а ширину определяет параметр «Ширина сайта» (или экран, на котором он просматривается с шаблоном ширины 100%).
Пример
Давайте рассмотрим простой пример для иллюстрации. На диаграмме ниже изображение имеет ширину 1200 пикселей и высоту 800 пикселей. Допустим также, что ширина сайта была установлена на 1200 пикселей в параметре Layout > Site Width , а высота контейнера равна ровно 800 пикселей либо по содержимому, либо по отступам. В этом случае изображение отображается полностью с исходным соотношением сторон.
Теперь, если высота контейнера была увеличена до 1000 пикселей либо за счет содержимого, либо отступов, то изображение теперь будет отображаться с высотой 1000 пикселей и с сохранением соотношения сторон и шириной 1500 пикселей. Так что здесь изображение будет немного увеличено и слегка обрезано с обеих сторон.
Вот реальный пример.
Контейнер ниже полностью пуст (без столбцов или элементов) и имеет отступы, установленные на 200 пикселей по высоте. Изображение, установленное в качестве фонового изображения, имеет размер 1200 x 750 пикселей и поэтому немного увеличивается до ширины макета сайта (в данном случае 1300 пикселей), и (по крайней мере, на рабочем столе) мы можем видеть только 200 пикселей его высоты, в середине страницы. изображение, так как это изображение имеет фоновое положение Center Center.
Но на мобильном устройстве происходит нечто другое. Сайт переходит в адаптивный режим, и, поскольку ширина устройства намного меньше, но остается отступ в 200 пикселей, мы получаем изображение высотой 200 пикселей, и при такой ширине экрана мы снова видим почти все изображение. Именно так работает адаптивный веб-дизайн.
Шаблон ширины 100%
Ситуация немного отличается, когда вы добавляете фоновое изображение на страницу с шаблоном ширины 100%. Затем в игру вступает размер экрана пользователя.
При использовании монитора с большим разрешением, например, монитора 4K с разрешением 3840 x 2160 пикселей, возможно, потребуется значительно увеличить масштаб изображений. Это всегда баланс между размером файла изображения и размером в пикселях, поэтому типичный подход заключается в том, что при загрузке фонового изображения контейнера в шаблоне ширины 100% необходимо убедиться, что изображение имеет ширину не менее 2000 пикселей, поэтому масштабирование сохраняется до минимум.
Пример
Вот последняя иллюстрация, показывающая пример контейнера на странице с использованием шаблона ширины 100% на большом мониторе. Изображение отображается с шириной, равной разрешению экрана (минус полосы прокрутки и т. д.), и изображение будет обрезано по высоте, если только высота контейнера не будет равна собственному соотношению сторон изображения. Таким образом, для изображения с соотношением сторон 3:2 и размером 2000 пикселей высота контейнера должна быть около 1333 пикселей, чтобы обрезка не происходила.
Таким образом, в большинстве ситуаций произойдет некоторая обрезка, и изображение будет увеличено. Если ваше изображение сильно пикселизировано в такой ситуации, это потому, что загруженное фоновое изображение недостаточно велико для масштабирования на большом мониторе без пикселизации.
Фоновые изображения столбцов
Столбцы немного отличаются от контейнеров. Они увеличиваются до размера вставленного фонового изображения. Ниже то же изображение, вставленное в качестве фона столбца в пустой столбец 1/1. Столбец регулирует свою высоту, чтобы изображение отображалось полностью. В этом случае, поскольку изображение имеет ширину всего 1200 пикселей, а ширина сайта составляет 1300 пикселей, изображение также немного увеличивается.
Если мы изменим размер столбцов, изображение будет отображаться меньше, всегда показывая полное изображение. Однако, если содержимое нашего столбца превысит соотношение сторон изображения, то высота изображения всегда будет заполнять столбец, а изображение будет обрезано по ширине, чтобы сохранить соотношение сторон изображения неизменным.
См. два примера ниже.
Примеры
В левой части размер столбца просто изменен на 1/2. Изображение остается в полном размере и просто уменьшается до размера 1/2. Однако с правой стороны было добавлено содержимое, которое выдвигает высоту столбца за пределы того значения, которое было бы установлено соотношением сторон изображения. Таким образом, высота изображения сохраняется, в то время как изображение увеличивается по бокам, кадрируя изображение, но сохраняя соотношение сторон.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Vitae et leo duis ut diam quam. Cras semper auctor neque vitae. Porta non pulvinar neque laoreet suspendisse. Elementum curabitur vitae nunc sed velit. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Bibendum arcu vitae elementum curabitur vitae nunc. Eget nunc lobortis mattis aliquam faucibus. Volutpat commodo sed egestas egestas. Ut sem nulla pharetra diam sit amet nisl.
Semper eget duis attellus at urna. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Velit egestas dui id ornare arcu odio ut. Ut consequat semper viverra nam libero justo laoreet.
Надеемся, что эта статья поможет объяснить, как изображения работают в качестве фона контейнера и столбца. Есть много сценариев, которые мы здесь не рассмотрели, но принципы те же. Веб-дизайн может быть сложным, но с пониманием принципов игры вокруг темы и того, как она взаимодействует с изображениями, вы сможете каждый раз получать удовлетворительный результат.
Ваш отзыв получен.
В этой статье
- Фоновые изображения контейнеров
- Пример
- Шаблон ширины 100%
- Пример
- Фоновые изображения столбцов
- Примеры
Расположение и размер фонового изображения
Блог
АвторHannah
Когда вы настраиваете свой сайт и хотите поместить изображение за какой-либо контент или покрыть всю область, важно понять несколько ключевых параметров с точки зрения размера фона. Вот краткое руководство, в котором излагаются важные вещи, которые нужно понять при настройке фона.
Теперь фоновое изображение — это просто фон, поэтому вы не можете установить размер области, добавив фоновое изображение определенного размера. Размер того, к чему вы добавляете это фоновое изображение, будет определяться содержимым контейнера. Что вы можете определить с помощью фона, так это то, как это изображение заполняет пространство контейнера.
Давайте начнем с примера, используя изображение с соотношением сторон 2×1. Это означает, что на каждые 2 пикселя это ширина, это 1 пиксель в высоту. На изображениях ниже мы обозначили два размера экрана, один для настольного компьютера, а другой для мобильных устройств, чтобы показать, как работает каждый параметр размера.
Этот параметр позволит убедиться, что в контейнере нет пустых мест, которые не были бы заполнены фоновым изображением. Он делает это, соблюдая соотношение вашего изображения, поэтому оно всегда растягивает изображение до заполнения, но не искажает его за пределы соотношения изображения. Это означает, что у вас будут части изображения, которые находятся за пределами экрана и не видны.
[столбцы] [span6]
[/span6][span6]
[/span6][/columns]
Размер фона: СодержитЭтот параметр содержания учитывает пропорции вашего изображения и следит за тем, чтобы ни одно изображение не выходило за пределы экрана, поэтому вы всегда будете видеть полное изображение в правильном соотношении.
[столбцы] [SPAN6]
[/span6] [span6]
[/span6] [/columns]
Фоновый размер: 100% 100% Это 100% вариант.
не защитит соотношение сторон вашего изображения. Таким образом, изображение будет растягиваться или искажаться, чтобы заполнить пространство, показывая полное изображение.
[columns] [span6]
[/span6][span6]
[/span6][/columns]
Надеюсь, это поможет объяснить параметры размера фона.
Фоны параллакса
Одной из забавных функций наших премиальных тем является возможность добавления фона параллакса. Ознакомьтесь с разделом «Хочу увидеть больше» этой демонстрации.
Параметры фона для этого можно найти в стилях строк компоновщика страниц. Я хочу кратко объяснить, чем параллакс отличается от «размер фона: обложка».
Фоновая крышка должна заполнять только пространство контейнера. Таким образом, если ваш контейнер имеет высоту 400 пикселей, это соответствует высоте изображения. Но параллакс должен заполнять всю высоту экрана, потому что он установлен за вашим контентом. Поэтому неважно, какой высоты ваш контейнер, для которого вы хотите использовать фон параллакса.
