调整图像大小以填充div

Question

我具有以下功能来调整图像大小以填充其容器div，而不会使图像倾斜。 它使用css按高度填充，如果图像宽度不足以填充div，则该函数使用width填充div并将height设置为auto。 问题在于该代码仅适用于window.load，因此如果用户注意他们可以看到图像加载，则一秒钟后它会更改。 那么我将如何更改该功能以与document.ready一起使用？

function imageResize() {
  $(".square").each(function(){
    if($("img",this).width() < $(this).width()){
        $("img",this).css("height", "auto");
        $("img",this).css("width", "100%");
    }
  });
}

编辑：当前功能与document.ready一起使用的问题是如果图像很大，则在图像加载之前文档已“就绪”。 因此，我想解决此问题的方法是在图像必须加载到页面上之前，从文件中获取实际图像的长度和宽度。

Answer 1

在ready处理程序中调用该函数：

$(document).ready(function(){
  imageResize();
});

如果要在调整大小时使用它，请在调整大小时调用函数：

$(window).resize(function(){
  imageResize();
});

在加载处理程序中使用您的代码来获取可以正常工作的图像尺寸：

$(window).load(function(){
  imageResize();
});