Адаптивный веб-дизайн -Изображения
Использование свойства width
Если для свойства width задано значение 100%, изображение будет адаптивным в соответствии с верхней и нижней границами:
Обратите внимание, что в приведенном выше примере изображение будет больше своего исходного размера. Мы можем использоватьmax-width.Это свойство хорошо решает эту проблему.
Использование свойства max-width
Если для свойства max-width задано значение 100%, изображение никогда не будет больше своего исходного размера:
Добавление изображений на веб-страницу
Фоновые изображения
Фоновые изображения можно адаптивно изменять в размере или масштабировать.
Ниже приведены три различных метода:
1. Если для свойства background-size задано значение "contain", фоновое изображение будет пропорционально адаптироваться к области содержимого. Изображение сохраняет свое соотношение сторон:
Это код CSS:
Пример
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:
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
Попробуйте сами »
3. Если для свойства background-size задано значение "cover", фоновое изображение будет расширено достаточно, чтобы полностью покрыть область фона. Обратите внимание, что это свойство сохраняет соотношение сторон изображения, поэтому некоторые части фонового изображения могут не отображаться в области позиционирования фона.
Это код CSS:
Пример
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Попробуйте сами »
Разные устройства отображают разные изображения
Большие изображения можно отображать на больших экранах, но они могут плохо отображаться на маленьких экранах. Нет необходимости загружать большие изображения на маленьких экранах, так как это влияет на скорость загрузки. Поэтому мы можем использовать медиазапросы, чтобы отображать разные изображения на разных устройствах.
Следующее большое изображение и маленькое изображение будут отображаться на разных устройствах:
Пример
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. Это определит ширину устройства, а не ширину браузера. При сбросе размера браузера размер изображения не изменится.
Пример
body {
background-image: url('img_smallflower.jpg');
}
/* Устройства больше 400px (или равные): */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Попробуйте сами »
Элемент <picture> HTML5
HTML5<picture>Элемент может содержать несколько изображений.
Поддержка браузеров
| элемент | |||||
|---|---|---|---|---|---|
| <picture> | Не поддерживается | 38.0 | 38.0 | Не поддерживается | 25.0 |
<picture>Элемент похож на<video>и<audio>Элемент. Можно предоставить различные ресурсы, при этом первый заданный ресурс является предпочтительным:
Пример
<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Подробнее.
Для тех, кто не поддерживает<picture>Вы также можете определить браузер элемента.<img>Вместо этого используйте элемент.