javascript - 调整大小时元素错位（使用 max-width:100% 缩放相对于窗口大小）

Question

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

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

演示- 缩放窗口，第 25 行的 css

Answer 1

Pikachoose 库在每个动画上设置一些元素的大小。

<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)
})

这应该可以在最后一个 window.resize 事件后 300 毫秒触发 goto。

希望这能给你一些想法。