Question

通常我能够在给定足够时间的情况下解决问题（因此我的第一篇文章在这里发布），但是我已经在这个问题上打了一会儿。

我试图：

使用jQuery中心图片（它是<img>标签，而不是<div>上的背景图片），
在（窗口）.load和
在窗口重新调整大小时，在某些断点处加载新的img文件。

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

CODE：

  <!-- 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只是一个带有＆＃34;笔记本电脑＆＃34;类的标签，包裹着一个图像标签（我想让图像源动态改变）。

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

详细说明评论。我做了这个小提琴：

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

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

我还在一个变量中存储了窗口宽度，以使代码更清晰，更易于阅读（您还可以在变量中设置大小，然后在需要时更改它们，因此只需编写一次）。

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和solved by flexbox。

使用jQuery解决中心问题并动态调整图像大小

2 个答案: