html - 响应式图像重排

Question

我们正在开发一个响应式网站，允许用户上传图片。

我们保留原始图像，然后生成缩略图以提供给分辨率较低的用户。

已经提出的问题是，当图像在较小屏幕尺寸的逻辑中切换时，其周围的元素会出现可见的回流。

我不确定如何防止这种情况，因为图像的高度不一致，因此无法在包含元素上设置初始高度。

任何想法，将不胜感激。

我看着这个：

http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

但这似乎只适用于我们知道比例的场景，即 16:9、4:3 等

Answer 1

我假设您的缩略图具有固定的最大尺寸。

您可以将图像放在设置了最大高度/宽度的框内，这样方向（横向、纵向、正方形）就无关紧要了。这将为您提供图像周围的固定空白。

您还可以在缩略图中生成此空白，为您的所有图像提供固定的宽度/高度。