Используя свойство ширины
Если width свойство установлено на 100%, то изображение будет реагировать и масштабирование вверх и вниз:
Обратите внимание на то, что в приведенном выше примере, то изображение может быть расширен, чтобы быть больше, чем его первоначального размера. Лучшее решение, во многих случаях будет использовать max-width свойство вместо этого.
Использование Макс-свойство ширины
Если max-width свойство устанавливается на 100%, то изображение будет масштабироваться вниз , если он должен, но никогда не масштабироваться до быть больше своего первоначального размера:
Добавить изображение к примеру веб-страницы
Фоновые изображения
Фоновые изображения могут также реагировать на изменение размера и масштабирование.
Здесь мы покажем три различных метода:
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> элемент, который позволяет определить более одного изображения.
Поддержка браузеров
| Элемент | |||||
|---|---|---|---|---|---|
| <picture> | Не поддерживается | 38,0 | 38,0 | Не поддерживается | 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> элемент.