Как сделать, чтобы картинка не обрезалась при масштабировании?

Question

[Антон]

Есть вот такой пример, как сделать, чтобы уменьшая ширину окна браузера с 1920 до 768px картинка не обрезалась справа, а была полностью как по ширине, так и по высоте? В сети полно примеров, как сделать адаптивную картинку, но учитывая еще и текст поверх - не получилось у меня.
https://codepen.io/anon/pen/mjGmpO?editors=1100

Comments

[snap44]

Вы сами ссылку открывали перед тем, как запостить?

[Антон]

snap44, Да, что не так?

[snap44]

Антон,

[Антон]

snap44,

Answer 1

[Арсений Матыцин]

Адаптивная картинка и адаптивный фон разные вещи.
Если бы была картинка, я бы сказал, что стоит дать ей свойство max-width: 100%, но тут используется фон. Сразу и в лоб — блок, к котором применяется background-image должен иметь свойство background-size: contain. Вот только делать этого очень не советую, так как у блока появятся «уши». Это когда есть незанятое пространство. В данном случае пострадает текст в первую очередь, который «лежит» поверх фона.
Разумнее использовать background-size: cover. Тогда картинка будет подстраиваться под размер области, в которой она является фоном.