Как делаются в css адаптивные картинки и фон (background)?

И вновь приветствую всех читателей. Раз уж зашла речь об адаптивной верстке, то вы должны сделать так, чтобы ваши картинки и фоновые изображения хорошо смотрелись на всех разрешениях экранов. Как делать в css адаптивные картинки и фоновые изображения? Хороший вопрос, давайте разбираться.

Адаптивные изображения — тег img

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

  1. При уменьшении ширины окна картинка попросту начинает не влазить в него. Лечение: использовать для блока, в котором размещается изображение, максимальную ширину, а самому изображению также задать максимальную ширину в 100% и автоматическую высоту, которая будет рассчитываться, исходя из пропорций. Вот так:
    img{
          max-width: 100%;
          height: auto;
    }
  2. Вторая проблема — при сильном сужении на маленьких экранах изображения становятся слишком маленькими, так что их практически не видно. Лечение: прописывать минимальную ширину изображениям. Как правило, это 250-300 пикселей. Меньше картинки просто не станут и это хорошо.
  3. Ну и, собственно, еще одна проблема связана с картинками, у которых есть обтекание. На определенной ширине может сложиться так, что картинка будет занимать почти всю доступную ширину, а текста слева или справа будет очень мало. Соответственно, на таком участке нужно сделать медиа-запрос и свойство float у изображения. То есть задать ему float: none.

Адаптивный фон — background-image

Чтобы адаптировать фоновое изображение под все экраны, я рекомендую вам использовать css-свойство background-size. У него есть следующие значения, которые нам могут подойти:

  1. contain — это значение масштабирует картинку так, чтобы она целиком помещалась в блок. При этом в блоке могут оставаться пустые места.
  2. cover — масштабирует фоновое изображение (с сохранением пропорций), чтобы по ширине или высоте (в зависимости от ситуации) оно растягивалось на весь размер блока. При этом по одной стороне (горизонтали или вертикали) все равно может остаться пустое место.

В общем, все советуют использовать background-size: cover. Так ваш фон будет с одной стороны растягиваться, а с другой сохранять пропорции. Есть более безотказный вариант, но при нем могут быть нарушены пропорции. Это background-size: 100% 100%. Это означает, что изображение будет растянуто на 100% и по ширине, и по высоте своего блока, вне зависимости от его размеров, однако при этом может быть сильно искажено, чтобы заполнить собой всю область.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Комментариев: 3
  1. mask

    А если изображение маленькое и без атрибутов ширины и высоты? Тогда как? Оно увеличивается на всю ширину дива
    как пример http://casinosoft.biz/game_gam.php

    1. Михаил (автор)

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

  2. Дмитрий

    Спасибо большое! Три дня мучался! Из всех перепробованных способов помогло только background-size: contain; .. Вот ещё ссылки на эту тему, может кому пригодится:
    https://webformyself.com/adaptivnoe-celoe-fonovoe-izobrazhenie-s-pomoshhyu-css/
    http://jsfiddle.net/uLd4daoa/
    http://jsfiddle.net/cgzh969d/

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

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