Как уместить изображение в div блок?

Question

[pet1987]

Есть такой сайт в процессе разработки.
На Главной странице не получается установить баннер так что бы изображение было полностью видно.
Высота баннера должна быть 300px.
Сложность в том что изображение обрезанное получается сверху и снизу.
Как то можно умесить это изображение? Или придется искать изображение другого размера?

В мобильной версии для смартфонов все получилось установить что бы баннер было видно полностью. На ПК версии не выходит.

Comments

[Ankhena]

У меня вопрос: так зачем вы ставите bg size cover, если не хотите, чтобы оно обрезалось?

Да ещё и с important...

[pet1987]

Ankhena,
Если убрать background-size: cover!important; то изображение все равно сверху и снизу обрезается.

[Ankhena]

pet1987, попробуйте всё таки посмотреть какие ещё есть значения у bg size кроме "cover" и "убрать cover".
И выберите подходящее.

[pet1987]

Ankhena,
Я уже все значения свойства bg size перепробовал. Ни одно корреткно не подходит.
Если задать bg size contain то изображеиние по бокам обрезанное, если bg size contain то изображение сверзу и снизу обрезается. Другие значения свойства bg size не подошли так же.

[Ankhena]

pet1987, ну уж при contain изображение нигде не обрезается, тут уж не грешите. При contain оно как раз таки полностью видно без искажения пропорций.
Но ок, ваши страдания понятны.

Что сделать следующим ходом?
Нарисуйте, а как оно должно выглядеть?
Вот берете ширину на которой вас не устраивает текущее положение дел и рисуете как должно быть.
Где хотите, в фигме, фотошопе, на бумажке.

[pet1987]

Изображение должно выглядеть вот так, те полностью отображаться без обрезки и умеситься в div блок.

[smilingcheater]

pet1987, подытожим
Высота фиксированно 300px, ширина 100%. Соответственно искажаем пропорции.
Выставьте background-size: 100% 100%;
Получите именно то, что вы нам описали в требованиях - на моём мониторе шириной 2880 будет выглядеть вот так https://snipboard.io/qs1Uul.jpg

[Ankhena]

pet1987,

те полностью отображаться без обрезки и умеситься в div блок.

Пропорции нас не волнуют, правильно я понимаю? Стали круги овалами и черт с ними, так? И пальцы немного раздуло.

Я к чему: это всё банальная геометрия.
Если она вам не нравится, то рисуйте свою картинку под каждый размер окна. Столько, сколько нужно, чтобы нравилось.

[s ds]

Вот так норм ? https://prnt.sc/PqErRWKHXuqq