Адаптивный веб-дизайн - Изображения
Измените размер окна браузера, чтобы увидеть, как изображение масштабируется по размеру страницы.
Использование свойства width
Если для свойства width задано значение в процентах, а для высоты задано значение "auto", изображение будет адаптивным и масштабируется вверх и вниз:
Обратите внимание, что в приведенном выше примере изображение можно увеличить до размера, превышающего его исходный размер. Во многих случаях лучшим решением будет использование свойства max-width .
Использование свойства max-width
Если свойство max-width установлено на 100%, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться до размера, превышающего его исходный размер:
Добавить адаптивное изображение на веб-страницу
Фоновые изображения
Фоновые изображения также могут реагировать на изменение размера и масштабирование.
Далее вы увидите три разных метода:
1. Если свойство background-size установлено на "contain", фоновое изображение будет масштабироваться и пытаться соответствовать области содержимого. Однако изображение сохранит свое соотношение сторон (пропорциональное соотношение между шириной и высотой изображения):
Вот CSS код:
Пример
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
Попробуйте сами »
2. Если для свойства background-size установлено значение "100% 100%", фоновое изображение будет растягиваться, чтобы охватить всю область содержимого:
Вот CSS код:
Пример
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
Попробуйте сами »
3. Если для свойства background-size установлено значение "cover", фоновое изображение будет масштабироваться, чтобы охватить всю область содержимого. Обратите внимание, что значение "cover" сохраняет соотношение сторон, и некоторая часть фонового изображения может быть обрезана:
Вот CSS код:
Пример
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Попробуйте сами »
Разные изображения для разных устройств
Большое изображение может быть идеальным на большом экране компьютера, но бесполезным на маленьком устройстве. Зачем загружать большое изображение, если вам все равно нужно уменьшить его? Чтобы уменьшить нагрузку или по каким-либо другим причинам, вы можете использовать медиазапросы для отображения разных изображений на разных устройствах.
Вот одно большое изображение и одно меньшее изображение, которое будет отображаться на разных устройствах:
Пример
/* Для ширины менее 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
Для ширины 400px и больше: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Попробуйте сами »
Вы можете использовать медиазапрос min-device-width, вместо min-width, который проверяет ширину устройства, а не ширина браузера. Тогда изображение не изменится при изменении размера окна браузера:
Пример
/* Для устройств, менее чем 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
Для устройств 400px и больше: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Попробуйте сами »
HTML5 элемент <picture>
HTML5 представил элемент <picture> который позволяет вам определять более одного изображения.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <picture> | 13 | 38.0 | 38.0 | 9.1 | 25.0 |
Элемент <picture> работает аналогично элементам <video> и <audio>. Вы устанавливаете разные источники, и первый источник, который соответствует предпочтениям, является тем, который используется:
Пример
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
Попробуйте сами »
Атрибут srcset является обязательным и определяет источник изображения.
Атрибут media является необязательным и принимает запросы мультимедиа, которые вы найдете в CSS @media правиле.
Также необходимо определить элемент <img> для браузеров, которые не поддерживают элемент <picture>.
