如何仅使用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