Как работает background-size:cover?

Question

[Роман]

Недавно столкнулся с проблемой. Нужно было что б ВСЯ фоновая картинка вмещалась в рамки. Я всегда думал, что background-size:cover заполняет всю картинку и это аналог если б кинуть тег img и растянуть по высоте и ширине. Оказывается нет, оно как то его ещё обрезает. Вот накидал по быстрому в редакторе. https://codepen.io/arkan4ik/pen/dzwayK
Как добиться третьего результата через css?

Answer 1

[Максим Тимофеев]

cover - это растянуть по высоте и ширине так, что бы полностью закрыть блок и не изменить пропорции картинки. Так что в зависимости от размеров блока и картинки обрежется либо по ширине, либо по высоте.
Если надо вписать в блок не обрезая - тогда это background-size:contain;
Если пропорции Вас не интересуют, тогда background-size: 100% 100%;

Что Вы хотели спросить Вашим codepen - так и не понял

Comments

[Роман]

Если пропорции Вас не интересуют, тогда background-size: 100% 100%; это меня интересовало) спасибо за развернутый ответ

Answer 2

[Вадим]

background-size:100% 100%;

Comments

[Роман]

внатуре)) спасибо)