Рамки и фоны, часть 2 / Размер фона, шаг 2 [3/33]
×

Размер фона, шаг 2 [3/33]

Ещё два значения свойства background-size — это contain и cover.

Значение contain работает так:

  • пропорции изображения сохраняются;
  • изображению задаются максимально возможные размеры, при которых оно и по ширине, и по высоте полностью помещается в границы фона;
  • изображение может не закрывать всю фоновую область блока, если пропорции изображения и блока разные.

Значение cover работает иначе:

  • пропорции изображения сохраняются;
  • изображению задаются минимально возможные размеры, при которых оно закроет всю фоновую область блока;
  • если пропорции изображения и блока разные, то часть изображения обрезается.

Опробуем эти значения на практике.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Размер фона, шаг 2</title> <meta charset="utf-8"> <base href="/assets/course88/"> <link href="style.css" rel="stylesheet"> </head> <body class="set"> <div class="portrait-vertical portrait-1"></div> <div class="portrait-vertical portrait-2"></div> <br> <div class="portrait-horizontal portrait-3"></div> <div class="portrait-horizontal portrait-4"></div> </body> </html>
CSS
[class^="portrait"] { background: url("img/keks.jpg") no-repeat #ffffff; background-size: 100px auto; } .portrait-vertical { width: 150px; height: 200px; } .portrait-horizontal { width: 200px; height: 150px; }
HTML Academy
  1. Блоку .portrait-1 задайте размер фона contain,
  2. .portrait-2cover,
  3. .portrait-3contain
  4. и .portrait-4 — снова cover.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.