Отзывчивый веб-дизайн — изображения
Измените размер окна браузера, чтобы увидеть, как изображение масштабируется в соответствии со страницей.
Использование свойства ширины
Если widthсвойство установлено в процентах, а heightсвойство установлено на «авто», изображение будет реагировать и масштабироваться вверх и вниз:
Пример
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свойство установлено на «обложку», фоновое изображение будет масштабироваться, чтобы покрыть всю область содержимого. Обратите внимание, что значение «обложка» сохраняет соотношение сторон, и некоторая часть фонового изображения может быть обрезана:
Вот код 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');
}
}
HTML-элемент <picture>
Элемент HTML <picture>дает веб-разработчикам больше гибкости при указании ресурсов изображения.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.