调整窗口大小时修改图像大小(jQuery)

Question

当页面加载和浏览器调整大小时，我尝试调整图像的大小。有些图像是纵向的，有些是横向的，它们将放在容器div中，该div也可以是纵向/横向的(取决于浏览器大小)。图像是否应该被拉伸以填满方框( 100%宽或100%高)并不重要，如果比例不匹配，则会发生裁剪(通过CSS overflow:hidden)。

我的方法是获得容器盒的比例(即纵向或横向)，并获得图像比例(纵向或横向)，比较它们，并相应地调整CSS的宽度/高度。

注意:所有的容器都有一个mr_our-dest-img-container类，并且都只包含一个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%"});
        }
    }
};

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 )
};