Ключевые слова contain
и cover
предназначены для использования сами по себе; Вы не можете использовать их только для ширины или только для высоты фонового изображения, то есть вы не можете соединить два из них вместе. Кроме того, эти два значения будут всегда масштабировать изображение в соответствии с его соотношением сторон.
Если вы хотите сохранить соотношение сторон изображения, сохраняя все изображение видимым (содержащимся) внутри его поля, просто укажите contain
для себя:
background-size: contain;
Если вы хотите сохранить только исходную ширину фонового изображения и растянуть его высоту вместе с содержащим его прямоугольником без сохранения соотношения сторон изображения, вам придется указать его ширину в пикселях и 100% для его высоты.
Так что для фонового изображения шириной 200 пикселей вы будете использовать:
background-size: 200px 100%;
Не забудьте дать вашему изображению соответствующие background-position
и background-repeat
.