Адаптивные картинки в CSS3. Адаптивные фоновые изображения Адаптивное фоновое изображение
Здесь вы узнаете, как можно создать адаптивный фон сайта на разные размеры мобильных носителей, где при помощи CSS получится красиво. Если у тебя картина идет под одной гаммой, это может быть серым или на градиентах, то здесь не применять эту методику. Так как он только идет под изображение, что встречаются на таких тематических ресурсах, как кино онлайн, и также на многих темах можно встретить. Если у вас сейчас установлена картинка, то можете посмотреть на любом онлайн-сервис, где увидите, что картинка просто расплывется, и если есть описание, то не понять на каком отрезке заднего вида оно размещено.
Подчеркиваем, что все будет корректно, также в самом низу будет добавлен темно прозрачный, где можно написать ваши ключевые слова и безусловно шикарно оформить. Он сделан для того, чтоб можно было стильно оформить, где аналогичным методом быстро снимается. Но главное, это чтоб если зайти, как пример со смартфона, то чтоб снимок прекрасно вписался под основной дизайн.
То большинство веб мастеров делают полную верстку на отзывчивый дизайн, а вот про задний фон совсем не то что вспоминают, возможно не знают, где его также следует под стилистику выставить, так как структура его смешается, а это тот рисунок, который основном мы стараемся на видное место поставить. Что теперь есть возможность создать его резиновым, где автоматически начнет растягиваться, чтоб все смотрелось корректно на любом экране.
Это при проверке, если на главной идет под широком монитор, то здесь где то под планшет.
Приступаем к установке:
Отзывчивый фон на CSS
Отзывчивое полное фоновое изображение с использованием CSS
В этом мануале рассмотрели очень простой способ, как сделать фоновый рисунок, чтоб полноценный вид стало полностью растянутым по охвату окна для просмотра обозревателем.
Здесь использовали background-size свойство CSS, чтобы все правильно выстроилось где нужно подчеркнуть, что здесь нет необходимости в применение JavaScript, все сделано на чистых стилях.
Также прикреплен пример с GitHub.
Одна из основных задач при адаптивной верстке - это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
С картинками в теге img
все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.
Данный трюк заключается в установке значения в процентах отступам (padding
) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.
Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px
, но все будет работать и с em
. Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .
Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover
. К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position
. Фоновая картинка должны быть по ширине как минимум равна max-width
элемента. В обратном случае картинка будет обрезаться.
Div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
figure.fixedratio {
padding-top: 56.25%; /* 450px/800px = 0.5625 */
background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.
Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height
и padding-top
:
На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top
, начальная высота (start height) - атрибуту height
. В итоге получается код:
Div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
figure.fluidratio {
padding-top: 10%; /* slope */
height: 120px; /* start height */
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
Использование SCSS для расчета
Атрибуты padding-top
and height
можно рассчитывать автоматически при помощи препроцессоров, например SCSS . Пример этого:
/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
$width-large: nth($large-size, 1);
$width-small: nth($small-size, 1);
$height-large: nth($large-size, 2);
$height-small: nth($small-size, 2);
$slope: ($height-large - $height-small) / ($width-large - $width-small);
$height: $height-small - $width-small * $slope;
padding-top: $slope * 100%;
height: $height;
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
figure.fluidratio {
/* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}
Адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset , для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width (ширины) и значении auto для свойства height (высоты) изображений.
img {
width
:
100%
;
height
:
auto
;
}
img {
width: 100%;
height: auto;
}
Базовые значения адаптивного изображения
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными. Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение. Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
div.container
{
width
:
96%
;
max-width
:
960px
;
margin
:
0
auto
;
/* центрируем основной контейнер */
}
img {
width
:
100%
;
/* ширина картинки */
height
:
auto
;
/* высота картинки */
}
div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
}
Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Адаптивные изображения в колонках
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок. Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным. Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
img {
width
:
32%
;
display
:
inline-block
;
}
img {
width: 32%;
display: inline-block;
}
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах. Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .
/* Для небольших устройств (смартфоны) */
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-инструментами. На сегодняшний день из-за активного развития технологий адаптивность в моде.
Многие уважающие себя бизнесмены заказывают разработку кроссбраузерных веб-сервисов, т.е. таких , которые вне зависимости от размера девайса подстроят контент под ширину и высоту вкладки. Именно поэтому в статье я расскажу про медиазапросы и их предназначение, а также приведу контрольный пример. Ну что ж, начнем разбор полетов!
Немного истории о динамических веб-ресурсах
Удивительно, однако понятие отзывчивости или адаптивности веб-дизайна появилось достаточно недавно. В 2010 году Итан Маркотт впервые использовал данный термин в одной из своих работ. Это натолкнуло его выпустить книгу, которая называется «Responsive Web Design».
Такой принцип верстки веб-страничек появился из-за увеличения количества различных видов девайсов с разным размером экрана: персональные компьютеры, планшеты, ноутбуки, и т.д.
К тому же сегодня современные смартфоны наделены высоким качеством отображения графики и не уступают в скорости функционирования интернета другим технологиям. Поэтому с каждым днем появляется все больше людей, которые приобрели современный мобильный телефон и долгое время зависают в сети именно через него.
И как следствие практически каждый веб-ресурс имеет своего собрата мобильной версии.
Так что же под собой подразумевает «отзывчивая» верстка?
Адаптивная верстка – это такой способ написания веб-сервиса, в котором прописано при каких размерах окна идет изменение расположения объектов на странице. Задается она при помощи медиазапросов. Давайте подробнее рассмотрим, что это такое.
Способ применения медиазапросов и его составляющие
Для того чтобы создать медиазапрос (media
queries
) нужно использовать специальное слово @
media
и это правила.
Такой термин произошел собственно от названия символа @, который нам привычнее называть «собачкой». Далее разработчик прописывает определенные условия динамичности, в которых определяется вид техники, медиафункции и иногда логические операторы.
Ниже я прикрепил таблицу, в которой перечислены основные виды девайсов.
Тип устройства
Пояснение
All
Значение по умолчанию. Как вы уже догадались используется для всех видов устройств.
tv
Указывает, что девайс – это телевизор.
screen
Экран монитора компьютера.
tty
Аппараты с фиксированной размерностью символов. Сюда относятся терминалы, телетайпы, различные устройства с ограничениями экрана.
print
Макет строится под печатающие девайсы.
projection
Используется для протекторов.
handheld
Портативные девайсы (телефоны, планшеты и т.д.)
braille
Указывает, что ресурс будет использоваться слепыми людьми. В основе таких технологий лежит система Брайля.
embossed
Принтеры, использующие выше названную систему.
speech
Сюда относятся все речевые сервисы: браузеры, программы, которые озвучивают текст, и т.д.
Теперь я хочу рассказать вам о логических операторах, применяемых в media queries, и их главном предназначении.
Так существует 3 основных логических оператора.
Начнем с not
. Используется для отрицания свойств. Заметьте, что not обладает низким приоритетом и поэтому он выполняется самым последним в очереди операторов. Пример объявления запроса:
@media handheld and (not screen) { ... }
В первом примере также описан оператор and
. Он отвечает за логическое И, т.е. объединяет перечисленные параметры и применяет к ним прописанное условие.
Если же необходимо задавать адаптивные условия для старых версий браузера http://сайт/brauzeryi-vebmastera/kakoy-brauzer-luchshe.html, то стоит использовать слово only. Пример инициализации:
@media only screen and (not print) { ... }
Внимательные читатели заметили, что я ничего не написал о логическом ИЛИ
, а без такого оператора не обойтись. Так вот в медиазапросах такую функцию выполняет запятая. Например:
@media screen and (max-width: 900px), print and (orientation: portrait) { ... }
Настало время поговорить о функциях. Их очень много, поэтому я перечислю основные. Если есть желание познакомиться со всеми существующими медиафункциями, то поищите официальную документацию или другие статьи с перечислением всех возможных вариантов.
Для начала хочу отметить, что основная часть функций в составе своего названия имеет приставки min
или max
. Так, если указано
max-height:840px
,
то условия касаются высоты окна меньше указанной размерности. А если же прописано
m
in-height: 950px
,
то это означает, что высота окна должна быть больше указанного размера.
Итак, для девайсов типа tv, print, tty, screen, handheld, и projection существуют такие функции:
Название
Предназначение
Пример
color (min-color, max-color)
Указывает количество бит на один цветовой канал. Например, если указана цифра 3, то общее число цветов равняется 512.
Для цветных дисплеев:
@media screen and (color) {div { background: gold; }}
Для 512 цветов:
@media screen and (min-color:3) { div { background: red; }}
orientation
Описывает внешний вид окна: альбомное представление страницы (landscape) или портретное (portrait).
@media screen and (orientation: landscape) { div{ color: #F8F8FF; }}
@media screen and (orientation: portrait) { div { color: #FDF5E6;}}
monochrome (min-monochrome, max-monochrome)
Определяется для монохромных (одноцветных) аппаратов. При указании цифры, вы устанавливаете сколько бит выделяется на 1 пиксел
@media print and (monochrome) {
body { font-family: Arial, sant-serif; } h1, h3, p { color: #000; }}
Для всех носителей, кроме речевой техники используются такие медиафункции:
Пример адаптивной веб-страницы
Для примера я сверстал простенькую страницу, при изменении размера которой меняется цвет заголовка сайта.
Если адаптировать фон на сайте с помощью стилей CSS, то его функция заключаться будет в том, что просматриваться будет полностью на мониторе и JavaScript здесь не нужен. Так как по статистике на просматривающихся и популярных интернет ресурсах, где фоновое изображение применяется на всю ширину.
Также нужно учитывать по адаптаций детали дизайна, это кнопки или иконки, которые на мобильных устройствах будут отображаться не корректно и для этого предназначены которые по размеру будут убирать, и вы можете выстраивать дизайн как вам нужно, а если правильно сказать, для удобства пользователя, который может выйти с мобильных устройств, и там все уже как нужно сформировано.
Для начала понадобятся два изображения-фона, первое изображение должно быть как минимум широкоформатным 1920*1080, этим мы добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время.
Второе изображение будет уменьшенной версией первого фонового изображения, но только для мобильных устройств. Допустим эти изображения будут иметь разрешения 1920*1080 и 768*480. Второе изображение для уменьшения времени загрузки страницы на маленьких разрешениях экрана, и для этого мы будем использовать медиа запрос, чтобы получить уменьшенную версию фоновой картинки, хотя всё прекрасно работает и без этого. Чтобы отредактировать фоновые картинки и уменьшить их вес, не буду учить, наверняка у всех есть закладки с такими сервис или умеете работать с фотошоп.
Ну и сам код, исходник скачал с иностранного сайта, но не трудно разобраться хоть комментарии на английском языке, не стал их стирать чтобы понятнее было: CSS:
200?"200px":""+(this.scrollHeight+5)+"px");"> body { /* Location of the image */ background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */ background-position: center center;
/* Makes the image fixed in the viewport so that it doesn"t move when the content height is greater than the image height */ background-attachment: fixed;
/* This is what makes the background image rescale based on its container"s size */ background-size: cover;
/* Pick a solid background color that will be displayed while the background image is loading */ background-color:#464646;
/* SHORTHAND CSS NOTATION * background: url(background-photo.jpg) center center cover no-repeat fixed; */ }
/* For mobile devices */ @media only screen and (max-width: 767px) { body { /* The file size of this background image is 93% smaller * to improve page load speed on mobile internet connections */ background-image: url(images/background-photo-mobile-devices.jpg); } }
