CSS работа с изображениями
Изображения украшают сайт, повышают конверсию и повышают уровень информативности контента. Поэтому необходимо уметь правильно использовать изображения в web.
Использование тега
imgТег img — стандартный способ добавления изображений на сайт.
Тег снабжен атрибутами:
- src — путь к изображению
- alt — текстовое описание изображения, показывается, когда сайт по каким-либо причинам не отображает контент.
Для масштабирования используются стандартные css свойства: width и height.
Пример:
.example_image {
width: 300px;
height: 200px;
}
<img src="/media/blog/example_image_1.jpg" alt="Изображение в теге img">
Использование фонового изображения
Тег img хорошо подходит для отображения статичного контента, но когда дело доходит для вывода динамики удобнее выводить элементы с помощью фонового изображения.
В качестве контейнера можно использовать любой элемент вроде
Пример:
.example_image_1 {
width: 300px;
height: 200px;
background: url(/media/blog/example_image_1.jpg) center no-repeat;
}
Свойство center выравнивает фон по горизонтали и по вертикали, а no-repeat запрещает повторение изображения.
Но зачастую изображение отличается по размеру и пропорциям от контейнера, а его необходимо растянуть по всей его площади.
Пример:
Со свойством background-size: cover:
.example_image_2 {
width: 300px;
height: 200px;
background: url(/media/blog/example_image_3.jpg) center no-repeat;
background-size: cover;
}
Если необходимо чтобы изображение занимало максимальную площадь контейнера, но при это не обрезалось используется background-size с параметром contain.
Пример:
Со свойством background-size: contain:
.example_image_3 { width: 300px; height: 200px; background: url(/media/blog/example_image_3.jpg) center no-repeat; background-size: contain; }
Также с помощью background-size можно задавать конкретный размер изображения.
Пример:
.example_image_4 {
width: 300px;
height: 200px;
background: url(/media/blog/example_image_4.svg) center no-repeat;
background-size: 131px 112px;
}
Еще можно добавить фоновый цвет контейнеру.
Пример:
.example_image_4 {
width: 300px;
height: 200px;
background: url(/media/blog/example_image_4.svg) center no-repeat ##1f1f1f;
background-size: 131px 112px;
}
Адаптивные изображения
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI (например, под Retina-дисплеи) для более детализированного отображения.
Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение.
Рассмотрим самые распространённые.
Самый простой способ реализации адаптивных изображений
В самом простом случае для реализации адаптивности изображений достаточно использовать изображения, которые либо такого же размера, как и максимальный размер области, которую они будут занимать, если нам адаптация под Retina-дисплеи не нужна; либо в два-три раза больше этой области, если нужна адаптация под экраны с высоким DPI.
Сами изображения в этом случае пропорционально масштабируются средствами CSS в сторону уменьшения.
Недостаток данного способа — это высокий объём трафика, необходимый для загрузки страницы с большим количеством полноцветных изображений, изображения же с небольшим количеством цветов обычно достаточно компактны даже в высоком разрешении.
Реализация адаптивных изображений с JS-обработкой на фронтенде
При помощи JS мы можем узнать размер области просмотра и DPI устройства, а уже исходя из этого запросить с сервера изображения, которые соответствуют данным параметрам.
Таким образом, устройства с небольшими экранами и/или со стандартным DPI не будут получать избыточно большие фотографии: так и трафик экономится, и сайт загружается быстрее.
Реализовывается метод обычно при помощи события JavaScript, которое при инициируется при загрузке страницы и которое «подставляет» в src-аттрибут изображений ссылку, полученную из исходной ссылки (обычно хранимой в data-атрибуте тега img) путем добавления в параметры для загрузки нужных данных об экране.
Этот способ несколько увеличивает объём хранимых версий фотографий, сложнее в реализации (как бекенда, так и фронтенда), а также требует обязательного наличия JS на стороне клиента.
Также в некоторых случаях кроме разрешения экрана стоит учитывать еще и скорость подключения к сети интернет (например, не стоит передавать изображения в высоком разрешении на iPhone с Retina-дисплеем, если этот смартфон использует edge для соединения с интернетом).
Реализация адаптивных изображений с обработкой на бэкенде
При первом запросе клиента можно «запомнить» параметры его экрана и при генерации страниц сразу подставлять «правильные» ссылки на изображения.
Для инициализации тут тоже часто требуется JS, хотя для определения устройства можно использовать и заголовки запроса (сведения о User Agent часто позволяют идентифицировать устройство). Реализация, построенная на заголовках запросов, уже совсем не зависит от JS и корректно работает в любых браузерах, хотя в настройке она несколько сложнее.
Современный и наиболее правильный способ работы с адаптивными изображениями
Описанные выше способы применялись (и до сих пор применяются) во многом из-за того, что нормальной поддерживаемой альтернативы браузеры не предоставляли. Теперь всё стало значительно лучше. В HTML5 у изображений появились аттрибуты srcset и sizes, позволяющие задавать несколько ссылок на изображения, а также появился тег picture, который дал еще больше возможностей.
Это не работает в Internet Explorer 11 и в более ранних его версиях, но во всех современных браузерах поддержка уже есть, поэтому данный способ в современной разработке является предпочтительным.
Работа с галереей изображений CSS
Поиск
Галерея изображений CSS позволяет создавать изображения и слайд-шоу на основе чистого CSS с хорошим переходом изображений и быстрой и удобной навигацией. Итак, с помощью CSS вы можете настроить дизайн своего сайта. Галерея соответствует последним веб-стандартам, а это означает, что изображения всегда будут отображаться, даже если пользователи, заходящие на сайт, не используют JavaScript.
Галерея изображений представляет собой очень полезную часть веб-сайта, поскольку в ней могут быть представлены фотографии, произведения искусства и различные визуальные материалы. Это может хорошо работать для художников, которые хотят показать свои фотографические или художественные материалы, для блоггеров, которые хотят поделиться некоторыми из своих фотографий, для тех, кто путешествует по миру и хочет поделиться фотографиями из недавней поездки или для других подобных целей.
В некоторых случаях у вас есть одно или два изображения на странице и, возможно, еще одно изображение для фона, фотографии представляют собой неотъемлемую часть веб-дизайна. Есть и другие случаи, когда вам нужно создать сайт с большим количеством изображений и создать галерею. CSS-изображение — лучшее решение для отличного вида сайта с полноразмерными изображениями.
В конце мы вместе изучим принципы CSS-галереи. Следовательно:
- Основы : мы можем создать галерею изображений CSS, чтобы профессионально взглянуть на сайт с несколькими изображениями; наряду с HTML, CSS — отличный инструмент для создания галереи веб-сайтов; мы можем сделать это, используя наши основные свойства CSS; можно использовать простую галерею, используя ширину и высоту, границы CSS, отступы, плавающие свойства и свойства выравнивания текста, поля
- Создание галереи изображений CSS : для формирования галереи изображений у нас должны быть элементы, к которым мы можем применить стиль и использовать элементы HTML:
<дел>
jpg">
Вы можете добавить любое описание изображения прямо здесь
org/wp-content/uploads/2018/10/master-of-landscape-architecture-fresh-master-of-landscape-architecture-new-in-2018-of-master -of-landscape-architecture.jpg" alt="Красивый пейзаж">