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

Question

[Norum]

Как в slick-slider сделать так, чтобы картинка не обрезалась при ЛЮБЫХ разрешениях экрана? Я имею ввиду, что ту картинку которую вы видите на десктопной версии, было так же видно и при маленьких разрешениях экрана без обрезаний? Я пробовал object-fit, как отдельно так и в связке с различными свойствами. Так же пробовал такой способ, что блоку .item, в котором хранится фотография задаются такие свойства:

overflow: hidden;
   position: relative;
   width: 100%;
   padding-bottom: 100%;

А самой картинке такие:

position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: 100% 100%;

Но в итоге это не помогло

Сам сайт ilyin1ib.beget.tech

Весь код jsfiddle.net/juc0q4hx/

Как в итоге сделать, чтобы выглядело нормально и чтобы ничего не плыло и не урезалось?
Это происходит даже не смотря на то, что сделал отступы меньше, чем в макете
P.S. сам макет https://www.figma.com/file/gS0qw4gjqhQ0KVjJuWXbzB/...

Как должно выглядеть


Как у меня

Comments

[Ankhena]

padding-bottom: 100%;

Но в итоге это не помогло

Логично.
Если неквадратную картинку вписывать в квадратный блок, то пропорции не совпадут со всеми вытекающими.

Если у картинок в слайдере одинаковые пропорции, то вообще можно не парится, оно само всё подстроится под любую ширину.

https://jsfiddle.net/y8d24zr6/

[Norum]

Ankhena, так в итоге как мне поступить, чтобы у меня картинка вписывалась в блок с сохранением пропорции? Просто ссылку, что вы прикрепили это swiper?

[Ankhena]

Norum, да, это swiper

Варианты что делать:
1. Привести все картинки к одинаковому размеру или хотя бы пропорциям.

Высота слайда будет определяться по картинке.

2. Сделать блок нужных вам пропорций и тогда уже object-fit

В обоих случаях в идеале использовать picture.

[Norum]

Ankhena, Я думал задать для .item, в котором находится картинка высоту и уже как-то в нем сделать так, чтобы картинка там отображалась без обрезания с сохранением пропорций блока, примерно, как отображается картинка в вашем коде https://jsfiddle.net/y8d24zr6/

Такое возможно? Просто у меня картинка прямоугольная и приводить к одинаковым размерам не вариант, она такая, какую мне ее скинули. Вы так же упомянули object-fit, я тоже задавал это свойство, когда уменьшал блок .item, но оно не сработало

[Ankhena]

Norum,

Просто у меня картинка прямоугольная

Было бы удивительно, если бы она была какой-то другой.

Для сохранения пропорций блока в основном используют хак с паддингом. Судя по тексту вопроса, вы о нем в курсе.
Только сделали квадрат, вместо нужных пропорций.

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

[Norum]

а какой хак с паддтнгом и куда его ставить?