Слайдер Swiper: как уменьшить изображения, но при этом закрыть все окно? ⇐ CSS

[Anonymous]

Я использую Swiper, чтобы создать слайдер, который занимает все окно, за исключением нескольких пикселей на полосу — здесь нет проблем.
(https://i.sstatic.net/qcGBA.jpg)
Однако, как вы можете видеть, изображение, которое я вставил для слайда (https://images.pexels.com/ photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) действительно увеличено.

Как сделать так, чтобы изображение отображалось немного больше ширины, чтобы оно не выглядело таким увеличенным/низкое качество?

Я пытался поиграться с некоторыми настройками ширины/высоты в стиле/CSS, но либо ничего не меняется, либо весь контейнер/обертка портится.

CSS: (в заголовке html в теге стиля)
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;

}
.swiper-slide img{
min-width:100%;
}


Javascript:






var swiper = new Swiper('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 8000,
disableOnInteraction: false,
},
loop:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});




HTML:





("");">

("");">









Подробнее здесь: https://stackoverflow.com/questions/561 ... ole-window