Question

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

我的方法是获取容器盒的比例（即portrate或landscape）并获得图像比例（纵向或横向），比较它们并相应地调整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%"});
        }
    }
};

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

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

1 个答案: