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()函数来监听窗口大小的改变，并在每次改变时再次调用此函数。

这样，当页面加载完成时，会自动执行一次初始验证，以确保初始状态下元素的高度正确。在窗口大小改变时，也会自动应用相应的高度。

使用的时候，只需将需要调整高度的盒子比例，同时修改需要变化的盒子高度即可。