Я использую Swiper для создания ползунка, занимающего все окно, за вычетом нескольких пикселей для бара - никаких проблем нет.
(https://i.imgur.com/2MIJOvs.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:
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
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',
},
});
</script>
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>