Swiper 滑块 - 为不同尺寸的屏幕设置响应式图像答案

【问题标题】：Swiper slider - setting responsive images for different size screensSwiper 滑块 - 为不同尺寸的屏幕设置响应式图像
【发布时间】：2016-12-22 23:57:22
【问题描述】：

我有一个ionic app，我使用 ion-slides 指令，该指令使用 swiper 滑块，用于图像滑块。这是它在视图中的外观：

<ion-slides ng-if="slider.length > 0 && article.external_media.length < 1" class="slides">
  <ion-slide-page ng-repeat="item in slider">
    <img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ item.image }}" class="cover">
    </ion-slide-page>
</ion-slides>

这是它的 CSS：

.slider {    
  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 200%;
    height: 100%;
    box-shadow: 0px 1.5rem 4.8rem 3rem rgba(0, 0, 0, 0.4) inset;
    bottom: 5px;
    left: -50%;
  }
}

.cover {
  width:100%;
  position: relative;

  &:after {
    content: "";
    display: block;
    position: absolute;
    width: 200%;
    height: 100%;
    box-shadow: 0px -5rem 4.8rem 3rem rgba(0, 0, 0, 0.4) inset;
    bottom: 5px;
    left: -50%;
  }
}

.slides {
  height: 325px;
}

问题是如果不给slides类任何高度或将其设置为100%或auto，图像不可见，因为高度没有设置。当我确实为slides 设置了高度时，它们不会正确调整大小，因为设置了高度，并且图像水平拉伸然后在更大的屏幕上。我该如何解决？

【问题讨论】：

标签： javascript html css swiper ion-slides

【解决方案1】：

Swiper 默认将swiper-wrapper position 设置为absolute。我已将其覆盖为position: relative;，然后我能够将slides height 设置为auto。所以，这是对我有用的最终解决方案：

.slides {
  height: auto;
}

.swiper-wrapper {
  position: relative;
}

【讨论】：

swiper-wrapper 的位置默认是相对的。