Предлагаю вашему вниманию небольшую, но полезную статью для тех, кто делает адаптированный сайт. В статье я покажу, как сделать изображение, которое будет автоматически подгоняться под размер экрана.
Использую простое правило в CSS.
○ Если вы для создания сайтов используете Bootstrap, тогда вам достаточно к картинке присвоить класс «img-responsive».
Например:
<img src="images/bloggood_ru.png" class="img-responsive">
○ Если вы для создания сайтов используете HTML+CSS, тогда достаточно использовать простое правило в CSS:
max-width: 100%; height: auto;
Например:
<html>
<head>
<title> Как подогнать картинку под размер экрана с помощью CSS (bloggood.ru)</title>
<style>
.img-responsive
{
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="images/bloggood_ru.png" class="img-responsive">
</body>
</html>
В результате вы увидите картинку, размеры которой будут меняться в зависимости от размера экрана.
Стандартный размер экрана
Здесь я сдвинул окно браузера
Попробуйте сделать то же самое или откройте вот эту картинку через телефон.
○ Если вы используете для создания сайта движок WordPress, тогда сделайте вот такие действия:
1. Откройте в админке файл «style.css» вашей темы и добавьте в самый конец вот это CSS правило:
.img-responsive
{
max-width: 100%;
height: auto;
}
2. В странице или записи нажмите на картинку, потом в появившихся настройках нажмите на карандаш (изменить):
3. Откроются параметры изображения. Найдите там поле «CSS-класс изображения» и вставьте туда «img-responsive». Нажмите на кнопку «Обновить»:
4. Обновите или сохраните запись или страницу и смотрите на результат.
На этом я заканчиваю рассказывать о том, как подогнать картинку под размеры экрана.
Вам всего хорошего!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Защита WordPress от взлома
Как в wordpress получить ссылку на миниатюру
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222519 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187694 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Не работает на firefix,в google hrome пашет на УРА, если есть фикс для лисички, прошу поделиться!
У меня в Mozilla Firefox все работает! Попробуйте обновить браузер, хотя должно работать и без обновлений!
а это работает если я картинку вставляю в модуль или ячейку таблицы
да, работать будет
Всё гениальное просто. Промучился со сложными CSS, всякие там background-size, пока не увидел ваш совет про max-height, max-width. Спасибо огромное!
Пожалуйста, Максим!
Спасибо! Помогли очень!
Пожалуйста!