Как сделать изображения адаптивными

При создании адаптивной темы для WordPress нужно сделать так, чтобы все изображения, которые пользователь будет добавлять в записи или на страницы, тоже были адаптивными. В этом посте я привожу небольшой код, который поможет добавить к изображениям в WordPress собственный класс, и сделать изображения адаптивными.

adaptive-layout

Сначала создадим в файле стилей класс .img-responsive:

Затем в файл functions.php добавим код, который добавит новый класс к изображениям:

После этого ко всем изображениям, которые были добавлены в блог раньше, и тем, которые будут загружены в будущем, добавится класс img-responsive, и изображения станут адаптивными.

Кстати, точно также можно добавить к изображениям любой другой собственный класс.




21 комментарий к “Как сделать изображения адаптивными”

  1. Кристина

    Никогда даже не задумывалась об этом))) В моей теперешней теме картинки уже сделаны адаптивными.
    Но даже самой это можно сделать вот так просто. Спасибо, Ирина!

    Ответить
    • Ирина

      Пользуйтесь 🙂
      В теме, которая у меня сейчас стоит на блоге, такой функции нет. Сейчас разрабатываю новую, и нашла вот такое решение для адаптивных картинок.

      Ответить
      • Дмитрий

        img {
        display: block;
        height: auto;
        max-width: 100%;
        }
        тоже будут адаптивные зачем код???

        Ответить
        • Ирина

          Дмитрий, код нужен для того, чтобы этот класс применился ко всем изображениям в постах блога, а не вообще ко всем изображениям.

          Ответить
          • Дмитрий

            Ирина вот интересная тема фильтр по цене от 5 до 20 чего либо по виду можно сделать в принципе через произвольные поля, а вот по цене , если напишите подробно попадёте в top инфы крайне мало на эту тему, а вот скажем требуется сайт фирмы делаю на wp-shop сайт новосной-визитка и немного продажи мебели wp-shop справляется с этим только фильтр по цене нужен

            Ответить
          • Дмитрий

            так можно так написать к тем иззображением которые нужнно
            .imr.adaptiv {
            display: block;
            height: auto;
            max-width: 100%;
            }

            Ответить
  2. Саша

    Доброго времени суток!
    Не могли бы Вы подсказать как сделать изображение заголовка темы адаптивным? А то на мобильных гаджетах картинка обрезается по бокам:(
    Спасибо.

    Ответить
  3. Ирина

    Точно также, как и все другие изображения. Добавляете к нему класс img-responsive и далее по инструкции.

    Ответить
  4. Максим

    А можно поподробней – как добавить класс к изображению….я вставил вышеуказанный код в файл style.css, другой в functions.php (кстати куда вставлять – я вставил в самый конец файла)….и ничего не изменилось…что я неправильно сделал или что надо еще сделать?

    Ответить
  5. Алексей

    как быть с ie8 по высоте изображения не меняются?

    Ответить
    • Николай

      Надо сделать запрос какой браузер стоит. И хозяину на красивой страничке (вежливо) посоветовать установить нормальный браузер. Тогда буржуйский ишачок примет меры или сдохнет на радость строителям.

      Ответить
  6. Oleg

    Это самый простой и не самый лучший способ адаптировать изображения под мобилки

    Ответить
  7. Остап

    А какой способ лучше для мобильных устройств?

    Ответить
  8. Юрий

    Могу я попросить автора данной статьи дать подробный код для style.css и functions.php Чтобы я сделал все то же самое для таблиц. Мне нужны адаптивные таблицы, чтобы также было применимо к тем таблицам, которые были добавлены в блог раньше, и тем, которые будут загружены в будущем. Спасибо большое.

    Ответить
  9. Юрий

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

    Ответить
  10. Вячеслав

    Спасибо огромное помогло. 3 часа ковырял шаблон и не мог понять почему картинки в заголовках адаптивные а в статье нет. Класс был такой в шаблоне прописан а вот в functios.php не добавили.

    Ответить
  11. Антон

    Ирина, спасибо большое за статью! Очень хороший, короткий и можно сказать универсальный способ, как по мне. Единственно не как замечание, просто столкнулся с этим, может кому-то то же пригодится. Возможно, конечно это последствие именно моего существующего кода, но при использовании вашего кода для стилей созданного класса, все картинки на сайте автоматически “выравнивались” по левую сторону. Мне необходимо было по центру, через редактор постов не получилось поменять/перебить это выравнивание. Помогло только дополнительное свойство(т.к. отображение элемента как блока) для вашего класса “.img-responsive”, а именно “margin: 0 auto;”. Повторюсь, не в укор Вам, может кто-то окажется в такой же ситуации. Еще раз спасибо за полезную статью!

    Ответить
  12. Антон

    Поправлюсь все картинки не на сайте, а в контенте поста), т.к. фильтр же на него ставили.

    Ответить

Оставить комментарий