Как сделать адекватное отображение фоновой картинки?

Question

[Barney_Gubmle]

Добрый день.

Задался вопросом, как адекватно ставить картинку на фон?

background-image: url();
background-size: cover;

? тогда мне кажется на телефонах изображение будет вести себя странно
Поделитесь хорошей практикой, спасибо

Comments

[Steppp]

Попробуй в https://codepen.io сделать, и показать нам результат)

[Barney_Gubmle]

Danny Arty @alexey-m-ukolov
Прошу прощения, наверное некорректно выразил мысль
Я имею ввиду чтобы с разных устройств картинка подбирала автоматически размер в высоту и ширину, но когда на телефонах картинка (если это фото) будет прям совсем маленьким
или же может стоит поставить "мин ширина / мин высота" ?
Я хотел бы узнать что считается хорошей практикой, чтобы на таком простом моменте не начать делать костыли

[Danny Arty]

Barney_Gubmle, зависит от вашей верстки. Иногда cover решает, если картинка соответствует соотношению сторон блока. Если нет, то уже как душе угодно

[Ankhena]

Barney_Gubmle,

Я хотел бы узнать что считается хорошей практикой

Хорошей практикой является делать так, чтобы на разных устройствах и при разной их ориентации выглядело хорошо.

Как именно, зависит от картинки, её пропорций и пропорций блока в который она вставляется.

Answer 1

[Алексей Уколов]

Как сделать адекватное отображение фоновой картинки?

Адекватность зависит от условий задачи. У background-size есть несколько хорошо документированных значений — адекватным будет то, что решит вашу задачу. Сразу скажу, что свойства «сделать хорошо везде» там нет — у всех свои плюсы и минусы.

Answer 2

[Danny Arty]

адекватное отображение фоновой картинки

Что вы имеете в виду под этим?
Как и написал Алексей Уколов это зависит от поставленных задач.
Если вы имеете в виду "неадекватное" для вас отображение на различных устройствах, то media-запросы и несколько вариантов фоновой картинки вам в помощь.