響應式圖像網格 - 最佳實踐和保留比例

我很熟悉大多數響應式設計的概念。然而，網格和排水溝讓我撓了腦袋（我發現的大多數解決方案都覺得非常'黑客'）。但是這個。這個。正在彎曲我的大腦。響應式圖像網格 - 最佳實踐和保留比例

我想創建一個圖像柵格。它將具有最大尺寸，但是當視口大小調整時，所有圖像都會協調一致。在這樣做的時候，一切都會保持正確的比例（在這個例子中都是完全正方形的）。

現在我認爲這可能是可能的，如果我聲明一個固定的高度，但肯定會使得完全沒有反應。例如，我創建了一個快速（非常糟糕的......但這就是爲什麼我在這裏！）mock-up這可能是如何.... [我要說的工作]。

<style> 
body , 
html { 
    height:100%; 
} 
* { 
    box-sizing:border-box; 
} 
.main-image { 
    float:left; 
    width:66%; 
    height:200px;  
} 
.alt-images { 
    float:right; 
    width:33%; 
    height:200px; 
}  
.main-image div { 
    height:100%; 
    width:100%; 
    background-color:grey; 
    padding:5px; 
} 
.alt-images div { 
    height:33%; 
    width:100%; 
    padding:5px; 
}  
.one { 
    background-color:red; 
} 
.two { 
    background-color:blue; 
} 
.three { 
    background-color:green; 
} 
</style> 

<div> 
    <div class="main-image"> 
     <div></div> 
    </div> 
    <div class="alt-images"> 
     <div class="one"></div> 
     <div class="two"></div> 
     <div class="three"></div> 
    </div> 
</div>

這就是要點。是的，這是一個壞榜樣。我把它放在一起很快。但說實話，我真的很難拼湊出一個可行的解決方案。我已經嘗試過的東西沒有工作。

我真的很感興趣在這裏。而不是你們在那裏把我的僞裝代碼拆開。 是解決這個問題的最好方法。例如，它是一個CSS唯一的解決方案，還是我會發現生活更容易使用Javascript。我在我的項目中也使用了jQuery Masonry，並進行了一些研究，我認爲Isotope可能會提供一些解決方案，但我寧願不去在商業項目中使用它。

更重要的是，當頁面進一步縮小並且空間變得更加有限時。佈局將翻轉圓這個樣子的：

我想我要破壞血管！

幫助。

站點範圍的框架（Twitter Bootstrap等）不是一個選項。該項目已經開始。儘管我對jQuery插件持開放態度，但我正在使用LESS和一些非常基本的mixin來創建網格。

你會如何解決這個問題？難道真的和我看起來一樣困難嗎？

編輯：忘了提及，它必須在IE9（不支持flexbox，除其他外）和以上工作。

感謝

來源

2015-09-24 user1100149

我會把圖像作爲背景圖像作爲封面圖片，而不是內嵌在HTML中。我認爲這是保持圖像縱橫比，同時改變包含div的縱橫比的唯一方法。

封面背景圖片：
https://css-tricks.com/perfect-full-page-background-image/

來源

2015-09-24 22:36:24

感謝您的評論。儘管如此，這是包含真正問題的divs。我不確定我是否已經很好地解釋了自己。理想情況下，包含div的長寬比將保持不變（與我的jsfiddle不同，這不起作用！因此我在這裏）。另外我忘了提及，它必須在IE9及更高版本中工作。所以我認爲這個規則包含了flexbox。我看到很多人這樣做......我只是不能解決問題。 – user1100149

響應式圖像網格 - 最佳實踐和保留比例

回答

相關問題