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

Question

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

我的方法是获取容器框的比率（即纵向或横向）并获取图像比率（纵向或横向），进行比较并相应地调整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%"});
        }
    }
};

- Michael Ruta

---

Google Chrome控制台给我这个错误Uncaught SyntaxError: Unexpected token }，并在主要问题的代码中突出显示最后一个花括号。我一遍又一遍地检查了这段代码，花括号似乎都互相抵消了？ - Michael Ruta

Answer 1

正如控制台所说，这是一个语法错误。你在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 )
};

- qqfish