Вселенная полезных советов 
Приветствую всех на блоге. Обещался, что статья про youtube и его адаптацией будет последняя. В общем забыл я написать как адаптировать картинки под любые разрешения мобильных устройств. Дел, как всегда на пару минут, а пользы целый вагон, если не хотите, чтобы ваша мобильная версия выглядела убого, то читайте дальше.
Проблема.
На некоторых сайтах изображения адаптированы либо частично, либо вообще никак. Я опять начинаю издеваться над сайтом Андрея usvinternet.ru. Потому что там наглядный пример того что картинка как бы оптимизирована под гаджеты. Так выглядят файлы в простом режиме.
А так они показываются на экранах мобильных устройств. Как видите, вроде бы картинка сужается по ширине, а вот по высоте никак, сохраняя свои размеры.
Из-за чего происходит в первую очередь? Потому что в стилях сайта Андрея прописаны директивы только к ширине.
Но это не ошибка верстки шаблона, дело в том что у него в атрибутах HTML самого файла прописаны точные размеры, вот скриншот.
В итоге так и происходит, ширина становиться резиновой, а высота никак, на неизменном уровне. Если этих атрибутов не было, то все было в порядке и картинка была адаптивна.Сейчас начнутся вопросы, что же надо убирать с каждой картинки атрибуты, это все очень долго, а а а? Нет, конечно, способ есть.
Решение.
А решение очень простое, прописываете такие директивы к стилям вывода картинок в постах и во всех местах блога.
max-width: 100%; height: auto;
Пока этот код оставим, и идем дальше. Для начала надо определиться куда вставлять данную комбинацию, и поэтому нам понадобиться наш старый друг просмотр кода элемента. Нажимаем на изображении правой кнопкой мыши и смотрим на скриншот.
Видим класс называется .post img. Он нам и нужен, на то что прописано внутри внимания не обращаем. Идем теперь в редактирование файла style.css, я покажу из самой админки вордпресса (внешний вид-редактор). Нажимаем комбинацию cntrl+f для вывода поиска по документу, и набираю фразу post img.
На снимке показано место, и найденный фрагмент, надо поправить, и вставить тот код, который я давал выше.
Внимание, если в классе уже есть, прописанные стили типа width и height, то их стираем и ставим те которые я дал вам.
Сохраняем, и проверяем, если все сделано как в статье то вы увидите что ваша картинка адаптируется ко всем размерам экрана, не зависимо от разрешения. Не забываем что так же надо поработать над весом изображений,
Итог.
Давайте подобьем все операции. А их всего четыре.
- Находим необходимый класс через “посмотреть код”.
- Находим его в style.css, или если тема сложная то у него будет другое название, но расширение по любому css.
- Меняем или вставляем мой код.
- Сохраняем и радуемся.
Ну что, начинающие и уже бывалые блоггеры дал я вам пищу для размышления. А у вас картинки правильно настроены, либо же как всегда 
?
