響應式圖像reflow

Question

我們正在開發一個響應式網站，我們允許用戶上傳圖像。

我們保留原始圖像，然後生成縮略圖圖像以供較低分辨率的用戶使用。

已經提出的問題是，當圖像在較小屏幕尺寸的邏輯中切換時，周圍的元素會出現可見的迴流。

我不確定如何防止這種情況，因爲圖像的高度不一致，所以無法在包含元素上設置初始高度。

任何想法，將不勝感激。

我看了看這個：

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

但它似乎只爲我們所知的比例即16場景：9,4：3等

Answer 1

我假設你的縮略圖有固定的最大尺寸。

您可以將圖像放在最大高度/寬度設置的框內，以便方向（風景，人像，方形）無關緊要。這會給你的圖像周圍固定的空白。

您還可以在縮略圖中生成這個空格，在所有圖像中給出固定的寬度/高度。