<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Адаптивные картинки в CSS3

Адаптивные картинки в CSS3

Зачем обязательно надо делать картинки адаптивными? К сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать подлинные её размеры, безвозвратно ушло. Теперь, мы должны все время думать и о маленьких экранах.

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

Как сделать галерею с адаптивными картинками?

Для начала, в теге img больше не надо указывать ширину и высоту.

<img src="image.jpg" alt="adaptive images" width="" height="" />
<!-- убираем атрибуты width и height -->
<img src="image.jpg" alt="adaptive images" />

При изменении расширения экрана, картинки тоже пропорционально уменьшались. Для всех картинок ставим ширину 100%.

img {
    max-width: 100%;
}

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

max-width: 25%

 

Адаптивные картинки в CSS3.

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

После определенной ширины экрана, например 375 пикселей, в ряду должно остаться только 2 картинки.

В таблице стилей пишем следующий код:

@media (max-width: 375px) {
  #gallery #product {
    max-width: 50%
    }

  #gallery {
    flex-direction: column;
  }
}

При верстке на flexbox-ах, необходимо для общего контейнера #gallery, задать атрибут.

flex-direction: column;

Этим самым, мы отменяем действие flexbox-ов на блоки с картинками, которое принудительно держало их в ряду. Половина картинок перенеслась на нижний ряд.

Адаптивные картинки в CSS3.

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

Ниже приведен пример, что я имею ввиду.

Адаптивные картинки в CSS3.

Задача все та же, на разных устройствах фоновая картинка должна подстраиваться под разные разрешения экрана, не теряя своих пропорций и качества.

В HTML разметке:

<body>
    ..Здесь может быть текст, картинки..
</body>

В CSS таблице:

Адаптивные картинки в CSS3.

Теперь подробнее разберем наиболее значимые свойства и их значения для решения нашей задачи.

background-size: cover;

Значение "cover" позволяет нашему изображению подстраиваться под разные размеры экранов, не теряя пропорций. Однако, надо учитывать, что фоновая картинка должна иметь действительно большие размеры, желательно не меньше 2000 пикселей по ширине. В противном случае, если размеры картинки меньше размера экрана, произойдет пикселизация, то есть изображение будет размытым.

Адаптивные картинки в CSS3.

 

background-attachment: fixed;

Что будет, если количество контента по высоте превысит высоту фонового изображения, выйдет за его границы?

На скриншоте ниже показано, как это будет выглядеть без fixed.

Адаптивные картинки в CSS3.

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

Посмотрите демо

А как быть с маленькими экранами? Зачем на них загружать большую картинку? Это слишком расточительно с точки зрения скорости загрузки для мобильного интернета.

С помощью любого графического редактора уменьшаем физические размеры фонового изображения, например до 1200 пикселей по ширине, таким образом у нас будет два одинаковых изображения: маленькое и большое.

Обратимся к медиа-запросу:

@media only screen and (max-width: 500px) {
  body {
    background-image: url(photo-small.jpg);
  }
}

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

Больше примеров про адаптивные картинки, Вы можете узнать, просмотрев этот видеокурс "Вёрстка сайта с нуля"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

romas_s romas_s 16.03.2018 17:29:49

стиль нужно применять к блоку контента, но не ко всем фото на сайте. Иначе поплывет структура сайта. body #blok_s_kontentom img { width:100%; height:auto; } такой способ работает даже с фото с явно указанными размерами. Если использовать max-width:100%; - работает только с на фотках без указанного размера.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.