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

在调用函数调整大小时尝试添加（）

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

另外，你错过了ei-slider

之前的那一点

我强烈建议您使用backstretch jquery插件。 http://srobbin.com/jquery-plugins/backstretch/

Answer 2

为什么图像仅在设置固定高度时可见？如果您要在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);
  });

});

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

2 个答案: