Блог Тимура Казанского

Адаптивные изображения - легко


Всем привет! Сегодня я покажу вам, как быстро и легко сделать все ваши изображения на блоге или сайте адаптивными (резиновыми), т.е. все ваши картинки будут адаптироваться под разрешения любых мобильных устройств. И так, что нужно сделать? Просто использовать одно единственное CSS правило:

img, object {
max-width: 100%;
}

Вот и все! Но имейте в виду, данное CSS правило не распространяется на атрибут изображения «height», т.е. если у вас установлены фиксированные размеры изображения, например высота (height=500px;) и ширина (width=800px), то при использовании вышеуказанного CSS фрагмента, высота изображения останется неизменной, тогда как ширина изменится согласно разрешению мобильного устройства.

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

А теперь, давайте перейдем к практике. Возьмем уже знакомый пример блога, который мы дорабатываем уже на протяжении нескольких статей, (таких как - элементы div на примере создания блога, как сделать адаптивный дизайн сайта, адаптивная верстка) и добавим картинки (описывающих статьи) на главную страницу блога с помощью тега <img>:

<img class="picture" src="rybalka.jpg">

После того, как мы попытаемся открыть наш блог на мобильном устройстве, мы получим следующее:

Изображения без адаптации

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

А теперь давайте добавим в CSS документ выше представленное правило, после чего все изображения будут ограничены в ширину 100% от родительских элементов, и уже не будут выходить за пределы экрана. Давайте посмотрим, как это будет выглядеть:

адаптивные изображения

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

Категория: Разработка сайтов для мобильных устройств

Читайте также - самые интересные истории обо мне

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

Комментарии: 0