Как правильно адаптировать картинки под мобильные устройства

Дата: / Автор поста:


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

Проблема.

На некоторых сайтах изображения адаптированы либо частично, либо вообще никак. Я опять начинаю издеваться над сайтом Андрея usvinternet.ru. Потому что там наглядный пример того что картинка как бы оптимизирована под гаджеты. Так выглядят файлы в простом режиме.

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

Из-за чего происходит в первую очередь? Потому что в стилях сайта Андрея прописаны директивы только к ширине.
Но это не ошибка верстки шаблона, дело в том что у него в атрибутах HTML самого файла прописаны точные размеры, вот скриншот.

В итоге так и происходит, ширина становиться резиновой, а высота никак, на неизменном уровне. Если этих атрибутов не было, то все было в порядке и картинка была адаптивна.Сейчас начнутся вопросы, что же надо убирать с каждой картинки атрибуты, это все очень долго, а а а? Нет, конечно, способ есть.

Решение.

А решение очень простое, прописываете такие директивы к стилям вывода картинок в постах и во всех местах блога.

max-width: 100%;
height: auto;

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

Видим класс называется .post img. Он нам и нужен, на то что прописано внутри внимания не обращаем. Идем теперь в редактирование файла style.css, я покажу из самой админки вордпресса (внешний вид-редактор). Нажимаем комбинацию cntrl+f для вывода поиска по документу, и набираю фразу post img.

На снимке показано место, и найденный фрагмент, надо поправить, и вставить тот код, который я давал выше.

Внимание, если в классе уже есть, прописанные стили типа width и height, то их стираем и ставим те которые я дал вам.

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

Итог.

Давайте подобьем все операции. А их всего четыре.

  1. Находим необходимый класс через «посмотреть код».
  2. Находим его в style.css, или если тема сложная то у него будет другое название, но расширение по любому css.
  3. Меняем или вставляем мой код.
  4. Сохраняем и радуемся.

Ну что, начинающие и уже бывалые блоггеры дал я вам пищу для размышления. А у вас картинки правильно настроены, либо же как всегда :) ?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Андрей

    Приятно быть испытуемым, узнаёшь новое и получаешь готовое решение. :cool:

    • Лифанов Валентин

      Я думаю только на пользу, я многих в пример выставляю, и им польза, и остальным знания.

  • Евгений

    Да уж Гугл объявляет о том. что будет хуже ранжировать сайты с отсутствием адаптивности для мобильных устройств. Придется точить сайты под мобильные системы сильнее.

    • Лифанов Валентин

      Это да, спрашивайте если что.

  • Рубен Хуснутдинов

    Приветствую, Валентин! Полезная статья, так как я в скором времяни планирую заняться адаптивной версткой своего сайта, пока еще не поздно, нужно делать быстрее... Буду знать к кому обращаться за помощью!

    • Лифанов Валентин

      Привет, Рубен. Конечно обращайся буду рад помочь.

  • Руслан

    У меня вроде с картинками все нормально? :cool:

    • Лифанов Валентин

      У тебя да медиазапросы настроены правильно.

  • Сергей Саранчин

    Валентин выбрал блог Андрея для опытов )) Причём Андрей не против. Вот истинная сила и мощь блогинга :smile:

    • Лифанов Валентин

      Ну а что, все от этого выигрывают :)

      • Сергей Саранчин

        Ну да, и я об этом тоже :smile:

  • Дмитрий

    Привет, Валентин. Сейчас вот решил посмотреть как у меня на мобильной версии отображаются картинки и увидел, что оказывается картинки внутри поста вылезают за пределы экрана (не адаптируются, а остаются в реальном азмере). Толи что-то съехало, то ли я просто сам не обращал внимания, просто обычно на мобильную версию блога редко захожу. В любом случае сейчас буду разбираться. Спасибо) ;-)

    • Лифанов Валентин

      Привет, пробуй, если что обращайся помогу.

    • Лифанов Валентин

      Дим вот в в строчке с этими классами «.posts .post .desc .aligncenter, .posts .post .desc div.aligncenter» пропиши мои стили из статьи и все будет в поряде.

    • Анна

      Дмитрий, не адаптируются не только картинки, но и видео. На твоем блоге их мало, но всё же!

      • Лифанов Валентин

        Про видео у меня тоже есть статья.

  • Дмитрий

    Валь, спасибо огромное тебе! Помогло. Теперь всё четко) Еще раз спасибо ;-)

    • Лифанов Валентин

      Видно твои верстаки, не совсем учли этот момент. Сразу видно что тема авторская.

      • Дмитрий

        Да. Дизайн и верстку я заказывал. Но вот в ходе работы иногда находятся какие-то косячки. Иногда сам исправляю (когда знаю, что сам справлюсь), иногда к верстаку обращаюсь, когда у самого не получается.

        • Лифанов Валентин

          Слава богу я тему сам писал, столько денег надо на это все.

          • Дмитрий

            Не, ты вообще молодец. Просто мои познания в сайтостроении заканчиваются HTML и CSS (без учета пятой версии) и то не самый продвинутый уровень. Так что если б я делал сам, то я поставил бы шаблон WP, изменил его в фотошопе, настроил под себя, ну и изменил бы некоторые свойства CSS). Естественно ни о какой адаптивной вестке по PSD шаблону и речи не шло) Поэтому обратился к фрилансеру, он заодно и всю лобуду типа минификации, replytocom, shema.org и т.д. настроил. Но сейчас я что-то сам этой темой загорелся. хочу изучить всё это дело.

          • Лифанов Валентин

            Твоя тема блога к этому не принуждает, раз все настроено, то зачем лезть, но все равно если что спрашивай.

  • Mixinvestor.com

    Валентин, подскажи — у меня картинки нормально адоптированы на блоге?

    • Лифанов Валентин

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

  • Наталья Краснова

    Валентин, я боюсь сама лезть в стили. Можно тебя попросить адаптировать видео и картинки?

    • Лифанов Валентин

      Наташ, конечно, буду рад помоч. Давай почтой, либо в скайп стучись, там пообщаемся.

  • Petr

    Все эти приемы, возможно, актуальны, если картинка вставлена в html. А если картинка присутствует как bakgraund-img. Тут-то что делать? Ведь без конкретных размеров блока в который вставляется bakgraund-img,весь блок исчезает.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

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

Лифанов Валентин. ©2015-2016 Все права защищены. Полное или частичное копирование запрещено.