Как делаются в 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% и по ширине, и по высоте своего блока, вне зависимости от его размеров, однако при этом может быть сильно искажено, чтобы заполнить собой всю область.