在移动设备上滑动宽度计算错误

时间:2018-09-17 00:52:02

标签: glidejs

我正在使用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;
    }
  }}}

0 个答案:

没有答案