元素在调整大小时错位(使用最大宽度:100%根据窗口大小缩放)

Question

我在所有<img>元素和image slider wrapper上使用max-width: 100%; height: auto;。

当调整浏览器窗口的大小时，图像会正确缩放，但周围的许多元素不会跟随并错位。一旦刷新页面或在图像滑块中加载下一个图像，它们就会自我校正。有什么想法吗？

Demo-缩放窗口，第25行的css

Answer 1

皮卡丘库设置每个动画上几个元素的大小。

<div class="pika-stage" style="height: 355px;">
<div class="pika-aniwrap" style="position: absolute; top: 0px; left: 0px; width: 835px;">

这就是为什么在下一个动画发生时，一切都会自行修复。您可以查看源代码并复制动画重新调整代码大小，然后将其放入$（window）.resize事件处理程序中。看看Pikachoose的文档，他们似乎有一个goto方法。

你可以这样做：

$(window).resize(function(){$('#pikame').data('pikachoose').GoTo(3)})

其中索引3是当前活动幻灯片。您可能希望使用某种形式的超时，并且只调用一次以提高性能。

var resizeSlider = null
$(window).resize(function(){
  if(resizeSlider) clearTimeout(resizeSlider)
  resizeSlider = setTimeout(function() {
     $('#pikame').data('pikachoose').GoTo(3)
  }, 300)
})

这应该使goto在最后一个window.resize事件后300ms被激发。

希望这能给你一些想法。