响应式图像尺寸答案

【问题标题】：Responsive image dimensions响应式图像尺寸
【发布时间】：2016-09-20 10:40:01
【问题描述】：

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

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

因为人们似乎不明白为什么我需要绝对定位我的滚动按钮：https://i.gyazo.com/65629a7e2642e192165596755c5b408b.gif

【问题讨论】：

我们为这种应用程序提供了 flex... 它可以帮助您.. 只需将宽度设置为 250 - 300px；和高度自动......它应该针对所有不同的屏幕尺寸进行自我调整。
如果您的向上滚动按钮需要绝对定位，那么您应该重新考虑您的布局。
您的向上滚动按钮是绝对定位的吗，如前所述？还是固定的？如果是，您应该在这种情况下尝试position: fixed;。该按钮将相对于浏览器窗口。
要么使用 AlexG 建议的固定位置，要么根据图像占用的空间使用 position:absolute，我建议您使用 setTimeout 函数让滚动按钮仅在 imgs 之后出现已加载。
@SimonHänisch 当我们点击页面底部时它是绝对定位的，因此它不会位于顶部/页脚后面。

标签： jquery html css image

【解决方案1】：

据我所知，你所有的图片比例都是一样的，那为什么不只设置宽度，把高度设置为自动呢？

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

但是您的 JS 计算问题更多的是 JS 计时问题，而不是 CSS。我猜计算函数被触发得太早了。

还有一件事：

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

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

【讨论】：

【解决方案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

【讨论】：