Question

我添加了jQuery函数来调整配置文件图片大小以适应div（200px 200px并且不确定该函数是否正确），但每次刷新页面时，该函数再次执行并且图片显示在整体屏幕只是一秒钟！我该如何防止这种情况？我的功能：

$(document).ready(function () {
    $('.profile-picture img').each(function() {

        var width = $(this).width();
        var height = $(this).height();

        if(width > height) {
            $(this).css("max-width", "100%");
            $(this).css("height", "100%");
        }else {
            $(this).css("width", "100%");
            $(this).css("max-height", "100%");
        }
    });
});

在一篇帖子中，我发现答案是：＆＃34;你必须用回调＆＃34;来做，但不知道如何做。你能给我一些建议吗？提前谢谢！

Answer 1

在浏览器呈现页面后触发.ready()事件。为了防止您要描述的问题，您应该在CSS中设置一些默认值。

更进一步，您可以在CSS中设置所有样式，然后只在Javascript中使用该类。

CSS：

.profile-picture {
  width: 200px;
  height: 200px;
}
.profile-picture img {
  width: 100%;
  max-height: 100%;
}
.profile-picture img.tall {
  max-width: 100%;
  height: 100%;
}

使用Javascript：

$(document).ready(function () {
  $('.profile-picture img').each(function() {
    if($(this).width() < $(this).height()) {
      $(this).addClass('tall');
    }
  });
});

整个屏幕上出现JQuery图像大小调整

1 个答案: