无法使用 jQuery 居中和动态调整图像大小

Question

通常，只要有足够的时间我就能解决问题（因此我第一次 post 在这里），但我已经在这个问题上苦苦挣扎了一段时间。

我正在尝试：

中心图片使用 jQuery（这是一个 <img> 标签，而不是 <div> 上的背景图片），
在 (window).load 和
随着 window 重新调整大小，在某些断点处加载新的 img 文件。

这是我目前的尝试。居中脚本完美运行。此外，还加载了正确的图像文件。但是，当 window 变宽或变窄时（图像文件不会动态重新加载），我无法使调整大小的部分起作用。

代码：

  <!-- Center Floating Div Elements -->
  <script> 
    jQuery.fn.center = function () {
      this.css("position","absolute");
      this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
      return this;
    }

    $(window).load(function(){
     $('.laptop').center();
     window.onresize = function(event) {
      $('.laptop').center();
    }
  });
  </script>

  <!-- Load correct image size on window load -->
  <script>
    $(function(){
      if($(window).width() >= 0 && $(window).width() <= 900){
       $("img").attr("src","/images/laptop-900.png");
     }
     else if($(window).width() > 900 && $(window).width() <= 1400){
       $("img").attr("src","/images/laptop-1500.png"); 
     }
     else{
       $("img").attr("src","/images/laptop-2100.png"); 
     }
   })
  </script>

  <!-- Re-load new image size on window resize -->
  <script>
    $(window).onresize = function(){
      if($(window).width() >= 0 && $(window).width() <= 900){
       $("img").attr("src","/images/laptop-900.png");
     }
     else if($(window).width() > 900 && $(window).width() <= 1400){
       $("img").attr("src","/images/laptop-1500.png"); 
     }
     else{
       $("img").attr("src","/images/laptop-2100.png"); 
     }
   });

  </script>

相关的 HTML 只是一个 class 为 "laptop" 的标签，包裹着一个图像标签（这是我希望图像源动态变化的地方）。

lharby：这是我对你的建议的尝试，也无法让它发挥作用：

<script>
var picresize = $(function(){
        if($(window).width() >= 0 && $(window).width() <= 900){
           $("img").attr("src","/images/laptop-900.png");
        }
        else if($(window).width() > 900 && $(window).width() <= 1400){
           $("img").attr("src","/images/laptop-1500.png"); 
        }
        else{
           $("img").attr("src","/images/laptop-2100.png"); 
        }
    });

    $(window).load(function(){
         $picresize();
         window.onresize = function(event) {
          $picresize();
        }
      });
</script>

Answer 1

所以要详细说明意见。我做了这个 fiddle:

https://jsfiddle.net/lharby/5p2xdnaf/

现在有一个名为 chImage 的函数，它检查 window 宽度，然后可以在各种事件上触发。

我还将 window 宽度存储在一个变量中，以使代码更清晰易读（您也可以在变量中设置尺寸，然后在需要时更改它们，因此仅写一次）。

var chImage = function(){
   var winWidth = $(window).width();
   if(winWidth >= 0 && winWidth <= 900){
      $("img").attr("src","http://placehold.it/350x150");
    }
    else if(winWidth > 900 && winWidth <= 1400){
      $("img").attr("src","http://placehold.it/500x300"); 
    }
    else{
      $("img").attr("src","http://placehold.it/800x400"); 
    }
};

然后调用此函数并将其绑定到我们想要的任何事件。

$(window).on("load resize", function(){
   chImage(); 
});

编辑

我确实移动了下面的居中功能以确保它不会干扰此功能，但居中可以通过 css 实现。我会尝试更新。

Answer 2

Chris Coyier 发表了一篇关于 figuring out responsive images 的非常有趣的文章。

图像居中可以在CSS中完成，不需要脚本。参见 centering things and solved by flexbox。

无法使用 jQuery 居中和动态调整图像大小

Trouble centering and dynamically resizing image using jQuery

html

javascript

jquery

resize

image