Question

我知道这听起来有点奇怪，但我有改变图像高度和宽度的功能我在文件就绪时执行它。但每次刷新页面时，我都会得到相同图像的不同结果（每隔4或5次就能得到它们）。这是我的代码：

$("img").each(function(){
    $(this).width(
      parseInt($(this).width()) / (parseInt($(this).width())/parseInt($(".container").css("height")))
    );
    $(this).height(parseInt($(".container").css("height")));
});

图像在容器中，我希望它们与容器具有相同的高度，宽度与高度的变化相同。容器的高度是动态改变的，每次我改变容器的大小我也会改变图像的大小（我这里没有问题）。我不太明白每次加载页面时这有什么不同。

Answer 1

您应该等待使用$(window).load()功能加载所有图片，或使用其他方式来控制图片加载。选择你的方式但问题只是在加载图像之前你的函数被触发了。

Answer 2

你不需要等待图片加载。

但你至少需要等待他们开始加载。

有什么区别？好吧，在我所知的所有图像格式中，第一个元数据之一是图像的尺寸。这就是为什么对于较大的图像，您可以看到浏览器在图像开始加载后立即保留空间，然后在图像加载时将其填入。

~~原来如此！考虑到这一点，让我们让您的页面看起来尽可能清晰，是吗？~~

忘记这一切，我刚刚意识到，你是将高度设置到容器的高度？在那种情况下......

$("img").each(function(){
    this.style.width = "auto";
    this.style.height = "100%";
});

你去吧。使用auto作为宽度将保持宽高比。

每次重新加载时功能都不同

2 个答案: