Как сделать - Адаптивным изображение
Узнайте, как создать адаптивный изображение с помощью CSS.
Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.
Измените размер окна обозревателя, чтобы увидеть ответный эффект:
Создание адаптивных образов
Шаг 1) добавить HTML:
Пример
<img src="nature.jpg" alt="Nature" class="responsive">
Шаг 2) добавить CSS:
Если требуется масштабировать изображение как вверх, так и вниз при отклике, задайте для свойства CSS значение width
100% и значение height
Auto:
Пример
.responsive {
width: 100%;
height: auto;
}
Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, используйте max-width: 100%
:
Пример
.responsive {
max-width: 100%;
height: auto;
}
Если требуется ограничить адаптивный образ максимальным размером, используйте свойство с выбранным max-width
пиксельным значением:
Пример
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.
Перейдите на наш CSS RWD учебник, чтобы узнать больше о отзывчивый веб-дизайна.