Как сделать - Отзывчивое изображение

Узнать, как создать адаптивный изображение с помощью CSS.

Отзывчивое изображение

Адаптивные изображения автоматически настраиваются в соответствии с размером экрана.

Измените размер окна браузера, чтобы увидеть отзывчивый эффект:

Создать отзывчивое изображение

Шаг 1) Добавить HTML:

Шаг 2) Добавить CSS:

Если вы хотите, чтобы изображение масштабировалось как вверх, так и вниз по отзывчивости, установите CSS свойство width на 100% и height на auto:

Если вы хотите, чтобы изображение уменьшалось, если это необходимо, но никогда не увеличивалось, чтобы быть больше, чем его исходный размер, используйте max-width: 100%:

Если вы хотите ограничить адаптивный образ максимальным размером, используйте свойство max-width, со значением пикселя по вашему выбору:

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

Зайдите на наш учебник CSS RWD, чтобы узнать больше о адаптивном веб дизайне.