Как правильно сделать фон для телефона?

Question

[Rem36]

Всем ку. Пробую сделать фон у первого экрана для разрешения 320px. Как сделать что бы она была как contain но растянулась на всю высоту контейнера?

Comments

[Ankhena]

background-size: auto 100%
Но по ширине может вылететь за пределы и будет как cover. Если ширины картинки, наоборот, не хватит, то будет как contain.

https://webref.ru/css/background-size

[Сергей delphinpro]

Нужно определиться, что вам больше подходит — cover или contain. Эти вещи нельзя совмещать. Чисто с точки зрения здравого смысла. И геометрии.

[Сергей delphinpro]

Если нужно полное заполнение без искажений, то я вижу один вариант:

Подготовить несколько изображений с разным соотношением сторон. Не под все аппараты, а усреднить основные разрешения. И потом подключать подходящую картинку @media/aspect-ratio
При этом использовать cover заполнение. Из-за усреднения, на некоторых девайсах картинка будет незначительно обрезаться по краям.

[Rem36]

Ankhena, спасибо.

[Rem36]

Сергей delphinpro, спасибо. все варианты растягивали картинку. тоже пришел к этому выводу.

Answer 1

[WebEagle]

Вероятно придётся чем-то пожертвовать если использовать cover и отпозиционировать background-position

Comments

[Rem36]

спасибо.

Answer 2

[Lord_Dantes]

background-size: 100% 100%;

Comments

[Rem36]

спасибо.