Изображение вырезается из карусели ⇐ CSS

[Anonymous]

Я создаю карусель изображений на своем веб-сайте, и все мои изображения имеют размер 1350 x 523
поэтому я сделал свою карусель высотой 523 пикселя, чтобы покрыть ее всю высоту
но ее ширина равна реагирует на размер экрана, но когда он меньше 1350, изображение отображается не полностью, оно обрезается, я хотел, чтобы размер изображения изменялся в соответствии с шириной карусели и отображался в полном объеме как по ширине, так и по ширине. высота.
вот пример:
Изображение карусели
Вы можете заметить, что водяной знак не отображается на 100%, потому что изображение вырезали.
вот код:

Код: Выделить всё

const slides = [
{
url:'../src/assets/img/banner1.png'
},
{
url:'../src/assets/img/banner2.png'
},
{
url:'../src/assets/img/banner3.png'
},
{
url:'../src/assets/img/banner4.png'
},
{
url:'../src/assets/img/banner5.png'
}
]
{/*Carousel Container*/}

{/*Image Div*/}

я упростил код, чтобы показать только полезные части
я испробовал все способы изменения размера контейнера карусели и установки ширины изображения на 100 % родителя, но это не работает

Подробнее здесь: https://stackoverflow.com/questions/784 ... e-carousel