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

时间:2015-02-13 14:12:08

标签: javascript jquery html image resize

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

我试图:

  1. 使用jQuery中心图片(它是<img>标签,而不是<div>上的背景图片),
  2. 在(窗口).load和
  3. 上加载正确的图像大小
  4. 在窗口重新调整大小时,在某些断点处加载新的img文件。
  5. 这是我目前的尝试。中心脚本完美运行。此外,加载了正确的图像文件。但是,当窗口变宽或变窄时(图像文件不会动态重新加载),我无法使重新调整大小的部分工作。

    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>
    

2 个答案:

答案 0 :(得分:0)

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

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实现居中。我会尝试更新。

答案 1 :(得分:0)

Chris Coyier撰写了一篇关于figuring out responsive images的完全有趣的文章。

图像居中可以在CSS中完成,不需要脚本。请参阅centering thingssolved by flexbox