Узнать, как создать адаптивный изображение используя HTML, CSS.
Адаптивное изображение
Адаптивные изображения автоматически настраиваются в соответствии с размером экрана.
Измените размер окна браузера, чтобы увидеть отзывчивый эффект:
Создать адаптивное изображение
Шаг 1) Добавить HTML:
<img src="nature.jpg" alt="Природа" 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 Изображения, чтобы узнать больше о том, как стилизовать изображения.
Зайдите на наш учебник CSS RWD, чтобы узнать больше о адаптивном веб дизайне.