Предлагаю вашему вниманию небольшую, но полезную статью для тех, кто делает адаптированный сайт. В статье я покажу, как сделать изображение, которое будет автоматически подгоняться под размер экрана.
Использую простое правило в 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.top)</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Похожие статьи
Редирект (перенаправление) пользователя от разрешения экрана на javascript
Выскальзывающая форма обратной связи на чистом CSS
Как установить минимальную сумму для заказа — WooCommerce?
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331671 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275609 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226702 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193200 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187094
Не работает на firefix,в google hrome пашет на УРА, если есть фикс для лисички, прошу поделиться!
У меня в Mozilla Firefox все работает! Попробуйте обновить браузер, хотя должно работать и без обновлений!
а это работает если я картинку вставляю в модуль или ячейку таблицы
да, работать будет
Всё гениальное просто. Промучился со сложными CSS, всякие там background-size, пока не увидел ваш совет про max-height, max-width. Спасибо огромное!
Пожалуйста, Максим!
Спасибо! Помогли очень!
Пожалуйста!