修改窗口大小时的图像大小（jQuery）

我试图在页面加载和浏览器调整大小时调整图像大小。一些图像将是肖像和一些风景，并且它们将位于也可以是纵向/横向（取决于浏览器尺寸）的容器div中。如果图像应该被拉伸以填充框（100％宽度或100％高度）并且如果比例不匹配则无关紧要，则会发生裁剪（通过CSS overflow:hidden）。修改窗口大小时的图像大小（jQuery）

我的方法是获取容器框（即portrate或风景）的比例，并获得图像比例（纵向或横向），比较它们并相应地调整CSS宽度/高度。

注意：所有容器都有一个mr_our-dest-img-container的类，并且都将只包含1个img元素（以及一些不同的元素）。

这是我的代码，这是行不通的。它什么也没做，我也弄不明白。有谁能帮我解决这个问题吗？

$(document).ready(function() { 
    updateImageSize(); 
    $(window).resize(function() { 
     updateImageSize(); 
    }); 
}); 

function updateImageSize() { 
    $(".mr_our-dest-img-container").each(function(){ 
     var ratio_cont = jQuery(this).width()/jQuery(this).height(); 
     var $img = jQuery(this).find("img"); 
     var ratio_img = $img.width()/$img.height(); 
     if (ratio_cont > ratio_img) 
     { 
      $img.css({"width": "100%", "height": "auto"}); 
     } 
     else if (ratio_cont < ratio_img) 
     { 
      $img.css({"width": "auto", "height": "100%"}); 
     } 
    } 
};

来源

2014-01-15 Michael Ruta

谷歌Chrome控制台给了我这个错误'未捕获的SyntaxError：Unexpected token}'，并突出显示了主要问题代码中的最后一个大括号。我已经翻遍了这段代码，大括号似乎全部取消了彼此？ –

这是一个语法错误，就像控制台说的那样。在each函数结束后，您错过了)。

function updateImageSize() { 
    $(".mr_our-dest-img-container").each(function(){ 
     var ratio_cont = jQuery(this).width()/jQuery(this).height(); 
     var $img = jQuery(this).find("img"); 
     var ratio_img = $img.width()/$img.height(); 
     if (ratio_cont > ratio_img) 
     { 
      $img.css({"width": "100%", "height": "auto"}); 
     } 
     else if (ratio_cont < ratio_img) 
     { 
      $img.css({"width": "auto", "height": "100%"}); 
     } 
    }); //missing) 
};

来源

2014-01-15 11:59:21 qqfish

修改窗口大小时的图像大小（jQuery）

回答

相关问题