我有一个页面，我需要在响应式网站中显示照片库，同时也支持 Retina 显示器。 网格必须由以这种方式按比例填充给定容器的 block 组成:
-
If the screen width is >= 1200px网格必须由 4 列组成(每个 block 的宽度为 25%) -
If the screen width is < 1200px and >= 768px网格必须由 3 列组成(每个 block 的宽度为 33%) -
If the screen width is <= 767px网格必须由 2 列组成(每个 block 的宽度为 50%)
所有的网格 block 必须是 2:3 的比例大小，测量一个 1980px 宽视口(viewport)的网格 block 我可以告诉你大约 500px(这不是限制，它只是一个有用的测量数据，我认为有什么用我需要在下面解释)。
这可以通过 @media 轻松实现当然是查询，并使用 padding-top: 66.66666666666667%比例为 2:3；我正在尝试为您提供尽可能多的数据来解释我必须遵守的限制。
所以棘手的部分来了:
网格的缩略图有不同的大小和纵横比，我需要将它们在各自的网格 block 中垂直和水平居中，同时适合/覆盖整个网格 block 区域。
由于网格是响应式的，我需要拇指与它们的 block 一起按比例缩放以适应狭窄的视口(viewport)。
为了使事情更加复杂，我需要支持视网膜显示器，所以拇指的大小必须加倍并缩小一半，并且也适合它们的网格 block .
如何实现？ (最好仅通过 CSS)
其他数据:
我正在使用 joomla! 2.5 作为这个元素的 CMS，我需要给我的客户一个非常简单的方法来添加图像。我找到的最好和最简单的解决方案是 Simple Image Gallery:我对这个插件的唯一需要是自动拇指生成程序 + 自动生成 <ul>页面中的网格，并且很容易覆盖我需要的 HTML+css 输出结构。
至于 Retina 显示器，最好提供正确的 @2x 语法，但我真的不在乎；至于性能问题，我认为为所有显示器提供单个缩小图像当然更容易处理，但也是处理 img 权重的真正有效和高效的方法!
See this for reference ，基本上你使用尺寸加倍的图像和 20 左右的 jpg 压缩，使用 CSS 将图像缩小一半，你仍然有一个漂亮的图像，适用于正常和视网膜显示。与原始尺寸图像相比，重量也减轻了 25%!
我自己对此进行了测试，我可以说它工作得很好，在极少数情况下，我的重量比正常尺寸的图像重，而且重量可以忽略不计(与易用性和好处相比)。
最佳答案
使用多种技术的组合来做到这一点:
关于css - 如何在仅使用 CSS 并支持视网膜显示的响应式网格中居中图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13105556/