jQuery 即時修改banner顯示圖的高寬比例

最近在將pc端修改爲響應式的模版時，遇到了點問題。

pc端的幻燈片，他們並不是用img標籤來直接顯示的，而是用了一個li標籤，然後給li標籤設置了背景圖。

並給背景圖設置了固定的高度。

於是我發現這個幻燈片想要通過寫css來控制高度還不如直接用js來控制。

function setFlashHeight() {
  if ($(window).width() < 1200) {
    var screenWidth = $(window).width();
    var newHeight = (screenWidth / 1920) * 500;

    $('.flash, .flash .flexslider, .flash .flexslider .slides li').css('height', newHeight + 'px');
  } else {
    $('.flash, .flash .flexslider, .flash .flexslider .slides li').css('height', '');
  }
}

$(document).ready(function() {
  setFlashHeight();
});

$(window).resize(function() {
  setFlashHeight();
});

該代碼定義了一個setFlashHeight()函數來設置.flash、.flash .flexslider和.flash .flexslider .slides li元素的高度。在$(document).ready()函數中，它會首先調用此函數來進行一次初始驗證。然後，使用$(window).resize()函數來監聽窗口大小的改變，並在每次改變時再次調用此函數。

這樣，當頁面加載完成時，會自動執行一次初始驗證，以確保初始狀態下元素的高度正確。在窗口大小改變時，也會自動應用相應的高度。

使用的時候，只需將需要調整高度的盒子比例，同時修改需要變化的盒子高度即可。