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

Question

[gazes12]

Как сделать чтобы картинки подстраивались под высоту и ширину слайдера, и при этом не обрезались?
https://codepen.io/gazes12/pen/qBxwrJv (сейчас картинки обрезаются)

Буду очень рад за помощь!

Comments

[Ankhena]

Так зачем вы задаете cover, если не хотите, чтобы обрезалось?
Вписать в область и оставить поля - это contain

[gazes12]

Ankhena, Получается так:

[Ankhena]

gazes12, привет, геометрия.
Если пропорции блока и картинки не совпадают, варианта три: обрежется, останется свободное место, перерастянется в каком-то из направлений (нарушатся пропорции).
Вы что хотите?

[gazes12]

Ankhena, Хочу чтобы пропорции нарушились

[Ankhena]

gazes12, сомнительное желание.
Но задайте высоту и ширину по 100%.

[gazes12]

Ankhena, А картинки будут адаптироваться?

[Ankhena]

gazes12, если родитель по которому они выравниваются будет адаптироваться, то у картинок не будет другого выхода.

[gazes12]

Ankhena, У меня в проекте другие картинки, я им прописал:

img{
        max-width: 100%;
        min-width: 100%;
}

Так делать можно?

[Ankhena]

gazes12, да как хотите так и делайте.
Если эти стили нужны всем картинкам на сайте, то почему нет.
Но обычно не так.

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

Answer 1

[Руслан]

Привет! Ширина должна быть равна ширине слайдера, а не фотографий.

До

const slider = document.querySelector('.slider');
/* ... */
let width = slider.offsetWidth; // width принимала занчения всех треёх фото

После

const sliderWrap = document.querySelector('.slider__wrap');
/* ... */
let width = sliderWrap.offsetWidth;

Как итог всё работает как надо :)