Swipe.js 调整浏览器图像大小时重叠

Question

我想在我的 Slider App 中使用 Swipe.js，但我发现当我调整浏览器窗口的大小时，图像会重叠。请检查下面的屏幕截图，以更好地理解我的意思：

当上一张图像比当前图像大时，似乎会出现这种效果。我不知道出了什么问题。

这是我的 CSS：

/* GALLERY CSS*/ 
.slider {
  overflow: hidden;
  /* visibility: hidden; */
  position: relative;
 }

.slider-wrap {
  overflow: hidden;
  position: relative;
 }

.slider-wrap > div {
  float: left;
  width: 100%;
  position: relative;
 }

#image {
  display: block;
  height: auto; 
  width: auto; 
  min-height: 400px;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

这是在调整大小事件发生时调用的函数：

function setup() {
    // cache slides
    slides = slider.children;
    length = slides.length;



   // If there is only 1 slide, looping does not make sense
    if( slides.length < 2 ) options.loopPanel = false;

    // slides length correction, minus cloned slides
    for (var i = 0; i < slides.length; i++) {
        if (slides[i].getAttribute('data-cloned')) length--;
    }


    // special case if two slides
    if (browser.transitions && options.loopPanel && slides.length < 3) {
        slider.appendChild(slides[0].cloneNode(true));
        slider.appendChild(slides[1].cloneNode(true));           

        slides = slider.children;
    }

    // create an array to store current positions of each slide
    slidePos = new Array(slides.length);

    // determine width of each slide
    width = options.container.getBoundingClientRect().width || options.container.offsetWidth;

    slider.style.width = (slides.length * width * 2) + 'px';

    // stack elements
    var pos = slides.length;
    while(pos--) {
        var slide = slides[pos];
        slide.style.width = width + 'px';
        slide.setAttribute('data-index', pos);

        if ( browser.transitions ) {
            slide.style.left = (pos * -width) + 'px';
            move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
        }
    }

    // reposition elements before and after index
    if ( options.loopPanel && browser.transitions) {
        move(circle(index-1), -width, 0);
        move(circle(index+1), width, 0);
    }

    if (!browser.transitions)   slider.style.left = (index * -width) + 'px';        

    options.container.style.visibility = 'visible';

    detachEvents();
    attachEvents();
    }

当我将大小调整回全屏时，它会恢复正常。在移动设备上发生得更快，因为它们的初始屏幕尺寸很小，所以我认为它必须对图像尺寸做一些事情，并且在调整大小时某些属性没有正确调整。但是，我在 Github 上盯着我的代码和源代码看太久了，我找不到我做错了什么。

更新：

向图像样式添加 max-width: 100% 似乎可以解决以下问题 重叠，但如果我这样做，我的图像将不会保持纵横比。 以这种方式，较宽的图像会被挤压并失去纵横比。所以还是 正在寻找解决方案。

Answer 1

如果您的图像重叠并且看起来像是脱离了父容器，则可能是图像未设置为响应式（根据屏幕宽度调整大小）。尝试将max-width: 100% 添加到滑块中的图像。