При больших размерах экрана background-image картинка начинает обрезаться (уменьшаться по Y)?

Question

[Максим Иванов]

https://jsfiddle.net/7x9bvd6k/
https://imgur.com/a/L7sLuJQ
На первом скрине на имгуре картинка такая, какая должна быть, но при увеличении экрана (к примеру 2500пх в ширину) низ картинки начинает обрезаться. Можно ли это как-то решить?

Comments

[Ankhena]

Можно ли это как-то решить?

Да, делать блок с такими же пропорциями, как и картинка.

Иначе будет либо свободное место либо картинка будет обрезаться либо будут нарушаться пропорции.

[Максим Иванов]

Ankhena, А может лучше в моей ситуации с img всё делать, а не с background-image?

[Ankhena]

Максим Иванов, вряд ли это изменит законы геометрии.

Answer 1

[i_m]

background-size:cover;

Comments

[i_m]

либо
background-size:auto 100%;

[Максим Иванов]

Сами пробовали то? Картинка же в ширь не идёт больше чем своей ширины хд)

[Пашенька]

Максим Иванов, вы с геометрией знакомы? Поместить прямоугольник в прямоугольник с отличными пропорциями можно либо исказив пропорции первого, либо подогнав его по большей стороне второго, тогда меньшая сторона будет обрезана. По другому не бывает. Чтобы всё совпало, соотношения сторон прямоугольников должны быть равны.

[i_m]

Максим Иванов, а вы пробовали? при значении cover заполняется все пространство

[i_m]

i_m, да и верстать правильно бы поучились
какая то верстка не логичная

[Ankhena]

i_m,

при значении cover заполняется все пространство

И часть картинки при этом обрезается.
А автор так не хочет.

[Максим Иванов]

i_m,

верстать правильно бы поучились какая то верстка не логичная

Что с ней не так и в плане не логичная?