Адаптивное фоновое изображение на CSS
В предыдущей статье про адаптивные изображения я обещал рассказать про адаптивное фоновое изображение. И так приступим. Для того, чтобы наше фоновое изображение хорошо смотрелось на всех типах устройств компьютерах, ноутбуках, планшетах ну и конечно на смартфонах мы будем использовать медиа запросы. Для начала создадим контейнер с именем id = «fon_img» к которому и будет, присваивается картинка.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
Адаптивное фоновое изображение на CSS
</head>
<body>
Адаптивное фоновое изображение на CSS
Это изображение всегда будет иметь 100% ширину так как его контейнер не имеет значения максимальной ширины (max-width)
</body>
</html>
Затем в стилях мы присваиваем к нашему контейнеру #fon_img наше фоновое изображение с заданной высотой, а так же выставим
CSS
Не забываем задавать префиксы для других браузеров -webkit-background-size: cover; -moz-background-size: cover;, -o-background-size: cover; , чтобы наше изображение корректно отображалось. После всего этого добавляем наши медиа запросы, с помощью которых мы будем изменять высоту фоновой картинки для разных устройств.
CSS
@media(max-width:1016px){
#fon_img{
height:600px;
}
}
@media(max-width:768px){
#fon_img{
height:400px;
}
}
@media(max-width:480px){
#fon_img{
height:250px;
}
}
Теперь высота изображения будет всегда подстраивается под используемое устройство. С помощью таких медиа запросов можно изменить шрифт для заголовка или цвет шрифта, ну и все что вам пожелается.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
Адаптивное фоновое изображение на CSS
</head>
<body>
Адаптивное фоновое изображение на CSS
Это изображение всегда будет иметь 100% ширину, так как его контейнер не имеет значения максимальной ширины (max-width)
</body>
</html>
Мы рассмотрели все варианты использования адаптивных изображений, которые можно использовать при адаптивной верстке. Конечно, еще много тонкостей осталось не рассказанными, но со временем, во время работы, вы их сами поймете, а это все лишь базовые основы, с помощью которых уже можно создать абсолютно адаптивный сайт.
Адаптивные изображения на сайте с помощью CSS
Итан Маркотт основоположник термина «адаптивный веб-дизайн». В своих работах он заявил, что адаптивные изображения являются одним из компонентов адаптивного веб-дизайна.
Однако проблема таких изображений, несмотря на кажущуюся гибкость и возможность работы с различными размерами экранов, заключается в том, что одно изображение будет загружаться независимо от размеров экранов устройств пользователя.
Это плохая новость для пользователей с ограниченным трафиком. Также это делает ваш сайт более «медленным» с небольшой скоростью интернет соединения.
Это одно из самых обсуждаемых вопросов среди веб-разработчиков. На сегодняшний день существуют различные методы и инструменты для решения данной проблемы. Ниже приведены некоторые из них.
Адаптивное изображение Bootstrap 3
При разработке сайта с использованием boostrap 3 картинки в верстке мы можем сделать адаптивными добавив им css класс .img-responsive. Этот класс добавляет следующие плавила max-width: 100%;, height: auto;
display: block;. Ширина будет все время равна ширине родительского блока, а высота автоматической чтобы сохранить пропорции изображения.<img src=»…» alt=»Responsive image»>
<img src=»…» alt=»Responsive image»> |
Адаптивное изображение в html
Это возможно будущий стандарт адаптивных изображений. Новый элемент <picture> позволяет устанавливать несколько источников изображений, а также breakpoint, с помощью которых определяется необходимая версия изображения:
<picture> <source srcset=»large-1.jpg 1x, large-2.jpg 2x» media=»(min-width: 45em)» /> <source srcset=»med-1.jpg 1x, med-2.jpg 2x» media=»(min-width: 18em)» /> </picture>
<picture> <source srcset=»large-1.jpg 1x, large-2.jpg 2x» media=»(min-width: 45em)» /> <source srcset=»med-1.jpg 1x, med-2.jpg 2x» media=»(min-width: 18em)» /> </picture> |
Заключение
Пока еще не нашли единственного стандарта, который решил бы эту проблему полностью. Эти методы и инструменты имеют временный характер, и поэтому в каждом из них есть как преимущества, так и недостатки.
Если же вам не нравятся предложенные выше предложения, тогда можно дождаться официального релиза свойств элементов <picture>.
comments powered by HyperComments
Адаптивные изображения с помощью CSS ~ Страницы Интернета
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута
srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width(ширины) и значении auto для свойства height (высоты) изображений.
img {
width: 100%;
height: auto;
} |
Базовые значения адаптивного изображения
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px;, в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу <img> внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
HTML:
<div> <img src="image01.jpg" /> </div> |
CSS:
div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
} |
Обратите внимание, что <img> элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Адаптивные изображения в колонках
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу <img> значение inline-block для свойства display, т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
HTML:
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> </div> |
CSS:
img {
width: 48%;
display: inline-block;
} |
2. Три колонки изображений
С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32%.
HTML:
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> </div> |
CSS:
img {
width: 32%;
display: inline-block;
} |
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media, указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width.
HTML:
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> <img src="image04.jpg" /> </div> |
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:
.container {
width: 100%;
}
img {
width: 100%;
} |
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Изображение с адаптивной центровкой с использованием CSS3
Разные галереи изображений существуют уже много лет. Они обычно удобны пользователям, пока не происходит попытка загрузки изображения большего размера, чем устройство отображения. Разработчики часто забывают об этой важной проверке, и пользователь остается с отцентрированным изображением, от которого сложно избавиться. Это проблема может усугубиться на мобильных устройствах.
До недавних пор галереям изображений нужно было провести несколько вычислений, чтобы определить размеры устройства отображения и изображения, после чего изменить размер и расположение центра соответствующим образом. К счастью, теперь CSS3 media queries и трансформации могут с этим справиться.
Демонстрация работы и исходный код
HTML
Кода здесь совсем немного: у нас есть тег img, которому мы зададим класс «ri», т.е. responsive image (адаптивное изображение).
<img src="http://lorempixel.com/600/450/" />
Не забудьте удалить все атрибуты высоты и ширины.
Запасной вариант
Браузеры Internet Explorer версий 6, 7 и 8 не поддерживают media queries и трансформации, так что наше изображение окажется не там, где нужно. Есть обходные пути и специфические свойства, которые могут решить эту проблему, но, на наш взгляд, зачастую они вызывают больше проблем, чем решают, например, увеличивают ширину страницы, снижают производительность, добавляют проблем при сопровождении и т. д.
Следовательно, следующий код — подходящий обходной путь для старых браузеров, и он должен нормально работать на большинстве горизонтальных мониторов настольных компьютеров:
img.ri
{
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
Свойства border-radius и box-shadow тоже не поддерживаются старыми версиями браузера Internet Explorer, но при этом не теряются основные черты изображения.
Расположение изображения
Чтобы отцентровать изображение с помощью CSS, мы передвинем его левый верхний угол в центр устройства отображения. Чтобы сдвинуть его назад в настоящий центр, мы воспользуемся соответствующей трансформацией с приставками производителей для старых версий браузеров:
img.ri:empty
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Обратите внимание на селектор img.ri:empty, в котором empty — это структурный псевдокласс, который соответствует только элементам, у которых нет потомков, а у изображений никогда не должно быть потомков. Это селектор CSS3, так что браузер Internet Explorer версии 8 и ниже не поддерживает его. Мы могли бы воспользоваться другим способом, например, таким как условные комментарии, но этот способ выглядит более эффективным решением, и ему нужно всего шесть дополнительных символов.
Делаем изображение адаптивным
Наше изображение должно соответствовать размерам устройства отображения, чтобы никогда не вылазить за его края:
- максимальная ширина должна быть определена, если высота устройства отображения больше его ширины, и
- максимальная высота должна быть определена, если ширина устройства отображения больше его высоты.
Мы можем использовать свойство ориентации media query, чтобы реализовать это:
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}Это просто, и все делается без сложного JavaScript.
Посмотрите демонстрацию работы и исходный код
Вы можете использовать код на свое усмотрение. Он может стать основой Вашей легкой современной галереи изображений.
Автор урока Craig Buckler
Перевод — Дежурка
Смотрите также: