响应式图像尺寸

Question

我遇到的问题是，当页面加载时，图片需要花费一点时间才能加载，这不仅是丑陋而且打破了向上滚动按钮的功能（这需要绝对一旦我们向下滚动到页面底部，它就位于页面底部 - 但是，在页面加载时，图像不占用任何空间，因此JS会错误地计算页面长度）。通常，您可以直接在图像上设置高度和宽度，但由于图像尺寸会根据屏幕宽度而变化，如上图所示（在移动设备上，它是流畅的，所以我可以＆＃39 ; t根据断点手动设置宽度/高度），我无法做到。

有人知道可以根据宽度设置图像高度的解决方案吗？

由于人们似乎无法理解为什么我需要绝对定位我的滚动按钮：https://i.gyazo.com/65629a7e2642e192165596755c5b408b.gif

Answer 1

据我所知，你所有的图像都有相同的比例，为什么不设置宽度并将高度设置为自动？

图像将根据其纵横比进行缩放。

但是你的JS计算问题更多的是JS计时问题，而不是CSS。 我猜计算功能太早了。

另一件事：

绝对定位的按钮不必具有调节位置...... 而不是计算的“顶部”值根据您的需要设置固定的“底部”值，并可能隐藏它直到达到某个滚动点，以确保在初始加载/加载最大项目之前它不存在。

//编辑： 如果所有其他方法都失败了，那么评论中建议的“setTimeout”应该是你的最后一根稻草。重新思考您的布局和定位，并在诉诸超时之前尝试其他解决方案。他们所做的就是让事情更加复杂和不可靠。

Answer 2

您应该更加具体到图像大小，以避免长时间浏览器渲染。如果您没有告诉浏览器图像的大小，它将构建一次以显示所有文本，然后它将等到图像下载并重建它以包围文本。它将为您的所有图像执行此操作。

要使图像响应，您可以在css文件中设置应用：

img {
    width: 100%;
    height: auto;
    dysplay:block;
}

我发现你有一些未找到的图片会破坏你的布局。有一个小的JS解决方案：

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

您可以在此处详细了解：https://stackoverflow.com/a/9891041