Использование ключевых слов contain и cover для настройки размера фона отличается следующим образом:
- contain масштабирует картинку так, чтобы она максимально накрыла собой весь блок. 1 Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций. 1
- cover масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). 1 Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево/вправо, либо сверху/снизу. 1
Таким образом, contain всегда показывает полное фоновое изображение, при этом зачастую оно не будет занимать всю доступную площадь элемента. 2 Cover заставляет изображение полностью покрывать область контейнера, показывая как можно больше изображения, но не искажая его. 4