Responsive Web Design - Images картинки
Измените размер окна обозревателя, чтобы увидеть, как масштабируется изображение по размеру страницы.
Использование свойства Width
Если свойство width имеет значение 100%, изображение будет реагировать и масштабироваться вверх и вниз:
Пример
img {
width: 100%;
height: auto;
}
Обратите внимание, что в приведенном выше примере изображение может быть увеличено до размера, превышающего его исходный размер. Лучшим решением, во многих случаях, будет использование
Вместо этого max-width свойство.
Использование свойства max-width
Если свойство max-width имеет значение 100%, изображение будет масштабироваться, если это необходимо, но никогда не масштабироваться, чтобы быть больше, чем его исходный размер:
Пример
img {
max-width: 100%;
height: auto;
}
Добавление изображения на веб-страницу примера
Пример
img {
width: 100%;
height: auto;
}
Фоновые изображения
Фоновые изображения также могут реагировать на изменение размера и масштабирование.
Здесь мы будем показывать три различных метода:
1. Если свойство background-size имеет значение "содержать", фоновое изображение будет масштабироваться и попытаться вписать область содержимого. Однако изображение будет сохранять соотношение сторон (пропорциональное отношение между шириной и высотой изображения):
Вот код 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;
}
Различные изображения для различных устройств
Большое изображение может быть совершенным на большом экране компьютера, но бесполезно на маленьком устройстве. Зачем загружать большие изображения, когда вы должны масштабировать его в любом случае? Для уменьшения нагрузки или по другим причинам можно использовать мультимедийные запросы для отображения различных изображений на различных устройствах.
Вот одно большое изображение и одно меньшее изображение, которое будет отображаться на разных устройствах:
Пример
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Вы можете использовать медиа-запрос min-device-width вместо min-width, который
проверяет ширину устройства, а не ширину обозревателя. После этого изображение не изменится при изменении размера окна обозревателя:
Пример
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
HTML5 <picture> элемент
HTML5 представил элемент <picture>, который позволяет определить более одного изображения.
Поддержка браузера
| Element | |||||
|---|---|---|---|---|---|
| <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> элемент.