我正在使用Glide.js并非常喜欢它,尽管我对移动宽度上的滑块有疑问。宽度小于800像素且宽度计算错误。我正在对用作幻灯片的图像使用padding top技巧。任何超过800像素的视口宽度和幻灯片都可以正确计算,一旦我低于800像素,它就会将幻灯片的宽度计算为卡的最大宽度,而不是纵横比和每个视图设置。我没有断点设置或CSS来影响800px的幻灯片。
<li class="glide__slide">
<a href="/link"><div class="">
<img src="/path/">
</div>
</a>
</li>
&__slide {
a {
display: block;
position: relative;
}
&--image {
position: relative;
overflow: hidden;
&:before {
display: block;
content: "";
width: 100%;
padding-top: (3 / 2) * 100%;
}
> img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
transition: $transition__alt;
}
}}}