BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Как подогнать картинку под размер экрана с помощью CSS

Как подогнать картинку под размер экрана с помощью CSS

2015-03-20 / Вр:10:29 / просмотров: 28891

Как подогнать картинку под размер экрана с помощью CSSПредлагаю вашему вниманию небольшую, но полезную статью для тех, кто делает адаптированный сайт. В статье я покажу, как сделать изображение, которое будет автоматически подгоняться под размер экрана.

Использую простое правило в 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>

В результате вы увидите картинку, размеры которой будут меняться в зависимости от размера экрана.

Как подогнать картинку под размер экрана с помощью CSS

Стандартный размер экрана

 

Как подогнать картинку под размер экрана с помощью CSS

Здесь я сдвинул окно браузера

Попробуйте сделать то же самое или откройте вот эту картинку через телефон.

○ Если вы используете для создания сайта движок WordPress, тогда сделайте вот такие действия:

1. Откройте в админке файл «style.css» вашей темы и добавьте в самый конец вот это CSS правило:

.img-responsive
{
  max-width: 100%;
  height: auto;
}

2. В странице или записи нажмите на картинку, потом в появившихся настройках нажмите на карандаш (изменить):

Как подогнать картинку под размер экрана с помощью CSS

3. Откроются параметры изображения. Найдите там поле «CSS-класс изображения» и вставьте туда «img-responsive». Нажмите на кнопку «Обновить»:

Как подогнать картинку под размер экрана с помощью CSS

4. Обновите или сохраните запись или страницу и смотрите на результат.

На этом я заканчиваю рассказывать о том, как подогнать картинку под размеры экрана.

Вам всего хорошего!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

8 Ответов на комментарий - Как подогнать картинку под размер экрана с помощью CSS

  1. Роман

    Не работает на firefix,в google hrome пашет на УРА, если есть фикс для лисички, прошу поделиться!

  2. Avatar photo Степан => автор блога

    У меня в Mozilla Firefox все работает! Попробуйте обновить браузер, хотя должно работать и без обновлений!

  3. rus63

    а это работает если я картинку вставляю в модуль или ячейку таблицы

  4. Avatar photo Степан => автор блога

    да, работать будет

  5. Max

    Всё гениальное просто. Промучился со сложными CSS, всякие там background-size, пока не увидел ваш совет про max-height, max-width. Спасибо огромное! :!:

  6. Avatar photo Степан => автор блога

    Пожалуйста, Максим!

  7. Павел

    Спасибо! Помогли очень!

  8. Avatar photo Степан => автор блога

    Пожалуйста!

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716