Разница между ключевыми словами auto и contain в свойстве background-size заключается в следующем:
- auto. 14 Если задано одновременно для ширины и высоты, размеры фона остаются исходными. 2 Если только для одной стороны картинки, то размер вычисляется автоматически исходя из пропорций картинки. 2
- contain. 14 Изображение масштабируется с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. 2 При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). 4
Таким образом, auto устанавливает фоновое изображение в исходном размере, а contain изменяет размер фонового изображения, чтобы оно было полностью видно внутри контейнера. 5