使用 jquery 计算高度并应用于 div

Question

我有一个横幅图像，只有在我设置固定高度时才可见，我想让它响应，所以我想到的唯一方法是计算图像的高度和窗口的宽度。

计算高度的函数是：windowWidth/1.845

如何使用 jquery/javascript 将该函数应用于 div css？

我试过这个功能，但它不起作用

    $(document).ready(function(){
  var originalWidth = $( window ).width();
  var newHeight = originalWidth/+(1.845)
; 


  function resize() {
    $("#ei-slider").css("height", newHeight); 

  }

  $(".target").each(resize);
  $(document).resize(function(){
      $("ei-slider").each(resize);
  });
});

Answer 1

为什么图片只有在设置固定高度时才可见？如果您在 CSS 中执行此操作，图像将自动“响应”。

img {
  max-width: 100%;
  width: 100%;
}

但是，如果您需要在调整大小中做其他事情，您可能希望在 window 而不是 document 上收听调整大小。

$(document).ready(function () {

  var $window = $(window);
  var originalWidth = $window.width();
  var newHeight = originalWidth / 1.845; 

  function resize() {
    // This will be .target or .ei-slider based on where it's called.
    $(this).css("height", newHeight);
  };

  $(".target").each(resize);

  $window.on('resize', function(){
      $(".ei-slider").each(resize);
  });

});

Answer 2

当你调用你的函数resize时尝试添加()

$(".target").each(resize());
  $(document).resize(function(){
      $(".ei-slider").each(resize());
  });

另外，你错过了 ei-slider 之前的重点

我强烈推荐你使用 backstretch jquery 插件。 http://srobbin.com/jquery-plugins/backstretch/