jQuery modifies the height-to-width ratio of the banner display in real time

Recently, I encountered some problems when modifying the PC side to a responsive template.

For the slides on the PC, they do not use the img tag to display them directly. Instead, they use a li tag and then set a background image for the li tag.

And set a fixed height for the background image.

So I found that if I want to control the height of this slide by writing css, it is better to control it directly with 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();
});

This code defines asetFlashHeight()function to set.flash、.flash .flexslider和.flash .flexslider .slides liThe height of the element. exist$(document).ready()function, it will first call this function to perform an initial verification. Then, use$(window).resize()function to listen for window size changes and call this function again each time it changes.

In this way, when the page is loaded, an initial validation will be automatically performed to ensure that the height of the element is correct in the initial state. When the window size changes, the corresponding height is automatically applied.

When using it, you only need to proportion the box that needs to be adjusted in height and modify the height of the box that needs to be changed.