調整大小時元素錯位（使用最大寬度：100％縮放相對於窗口大小）

Question

我正在使用max-width: 100%; height: auto; 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)
})

這樣就可以使goto在上一個window.resize事件之后的300毫秒內觸發。

希望這能給您一些想法。