ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

Адаптивный веб-дизайн - Изображения


Адаптивные изображения

Измените размер окна браузера, чтобы увидеть, как изображение масштабируется по размеру страницы.


Использование свойства width

Если для свойства width задано значение в процентах, а для высоты задано значение "auto", изображение будет адаптивным и масштабируется вверх и вниз:

Пример

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 установлено на "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>.