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与当前函数一起使用的问题是，如果图像很大，则文档已准备好＆＃34;在图像加载之前。所以我想要解决这个问题就是在图像必须加载到页面之前从文件中获取实际图像的长度和宽度。

Answer 1

调用就绪处理程序中的函数：

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

如果你想在调整大小时调用函数调整大小：

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

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

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

调整图像大小以填充div

1 个答案: