Чем отличается использование ключевых слов contain и cover для настройки размера фона?

Использование ключевых слов contain и cover для настройки размера фона отличается следующим образом:

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

Таким образом, contain всегда показывает полное фоновое изображение, при этом зачастую оно не будет занимать всю доступную площадь элемента. telegra.ph Cover заставляет изображение полностью покрывать область контейнера, показывая как можно больше изображения, но не искажая его. www.dev-notes.ru