如何僅使用CSS將響應網格中的圖像置中並支持視網膜顯示？

Question

我有一個頁面，我需要在響應式網站中顯示照片庫，並支持視網膜顯示。

• If the screen width is >= 1200px電網必須由4列（用於每個塊的25％寬度）
• If the screen width is < 1200px and >= 768px組成電網必須由： 電網必須通過以這種方式成比例地填充一個給定的容器的塊組成由3列（用於每個塊的33％寬度）
• If the screen width is <= 767px電網必須由2列組成（每個塊的50％寬度）

所有網格塊必須在2：3的比例的大小，並測量一個具有1980px寬視口的網格塊我可以告訴你大約500px（這不是一個限制，它只是一個有用的度量數據，我認爲我需要在下面解釋）。
這當然可以通過@media查詢輕鬆實現，並且使用padding-top: 66.66666666666667%爲2：3的比例;我試圖給你儘可能多的數據來解釋我必須尊重的限制。

所以這裏談到棘手的部分：
網格縮略圖是各種尺寸和縱橫比，並且我需要中心它們在它們各自的網格塊，垂直和horizzontally，而裝配/覆蓋整個網格塊區。
由於網格反應靈敏，我需要拇指按比例縮放，以適合狹窄的視口。
爲了讓事情更復雜，我需要支持視網膜顯示器，所以拇指必須是尺寸的兩倍，縮小一半，並且也適合它們的網格塊。

這是如何實現的？ （最好是僅通過CSS）

---

其他數據：
我使用Joomla！ 2.5作爲這個項目的CMS，我需要給我的客戶一個非常簡單的添加圖像的方法。我發現的最好和最簡單的解決方案是簡單的圖像庫：我需要這個插件的唯一需要是自動生成拇指過程+自動生成<ul>網頁在網頁中，並且很容易覆蓋HTML + CSS輸出結構，以滿足我的需求。對於視網膜顯示器，應該更好地提供正確的@ 2x語法，但我並不在意;至於性能問題，我認爲給所有人展示一個縮小的圖像更容易處理，當然，也是一種真正有效和高效的方式來處理img重量！
See this for reference，基本上你可以使用尺寸增加一倍的圖像和20倍左右的jpg壓縮率，將圖像縮小爲CSS的一半，並且仍然具有漂亮的圖像，適用於普通和視網膜顯示。此外，原尺寸圖像的重量減輕了25％！
我已經測試過這個我自己，我可以說這很好，在很少的情況下，我比正常大小的圖像重量更輕，並且數量可以忽略不計（與易用性和優點相比）。

Answer 1

長的問題，但如果它只有大約不同尺寸的圖像的中心，你可以做這樣的：

您需要的div，你會浮起，這些將具有相同的高度和wdths（你可以然後針對不同的查詢調整）。

之後，你有另一個格中的每個這些div爲垂直和水平中心的：

<div class="outer"> 
    <div class="table"> 
    <div class="image"></div> 
    </div> 
    </div> 

基本上，浮在外層div，應用顯示錶小區到。表格，然後應用垂直對齊中間，垂直居中。

重要

一個浮動的div與顯示：表單元格會忽略垂直對齊！因此，額外的div！

http://jsbin.com/ajunol/2/edit

.outer { 
    height:100px; 
    width:100px; 
    border:solid; 
    float:left; 
    margin:10px; 
} 
.table { 
    height:100px; 
    width:100px; 
    border:solid; 
    display:table-cell; 
    vertical-align:middle; 
} 
.image { 
    height:50px; 
    width:50px; 
    background-color:red; 
    margin:0 auto; 
    max-width:100%; 
} 

高度，寬度和背景顏色，OBV您可以忽略，但你應該有最大寬度100％，因此圖像犯規超過容納箱。

在我的例子中，圖像被表示爲div，但顯然你會在那裏有圖像標籤而不是div。爲了解決這個問題，請將帶有圖像的類圖像替換爲div。

Answer 2

使用的技術的組合來做到這一點：

• Fit and Shrink technique
• Centering an image in a box
• Inline-block thumbs