如何在仅使用 CSS 并支持视网膜显示的响应式网格中居中图像？答案

【问题标题】：How to center images in a responsive grid with CSS only and supporting retina displays?如何在仅使用 CSS 并支持视网膜显示的响应式网格中居中图像？
【发布时间】：2012-10-17 19:39:03
【问题描述】：

我有一个页面，我需要在响应式网站中显示照片库，并且还支持视网膜显示。网格必须由以这种方式按比例填充给定容器的块组成：

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 的比例大小，并且测量一个具有 1980 像素宽视口的网格块我可以告诉你大约是 500 像素（这不是限制，它只是一个有用的测量数据，我认为有什么用我需要在下面解释）。
当然，这可以通过@media 查询轻松实现，并使用padding-top: 66.66666666666667% 2:3 的比例；我试图为您提供尽可能多的数据来解释我必须遵守的限制。

所以棘手的部分来了：
网格的缩略图具有各种大小和纵横比，我需要将它们垂直和水平居中在各自的网格块中，同时适合/覆盖整个网格块区域。
由于网格是响应式的，我需要拇指与它们的块一起按比例缩放以用于狭窄的视口。
更复杂的是，我需要支持视网膜显示器，因此拇指必须是两倍大小并缩小一半，并且也适合它们的网格块。

如何做到这一点？（最好只能通过 CSS）

其他数据：
我正在使用joomla！ 2.5 作为这个项目的 CMS，我需要给我的客户一个非常简单的方法来添加图像。我找到的最好和最简单的解决方案是 Simple Image Gallery：我对这个插件的唯一需要是自动生成拇指的过程 + 在页面中自动生成 <ul> 网格，并且非常简单地覆盖 HTML+css 输出结构我的需求。

对于视网膜显示器，最好提供正确的@2x 语法，但我并不在意；至于性能问题，我认为为所有显示提供单个缩小图像当然更容易处理，但也是处理 img 权重的一种非常有效和高效的方法！
See this for reference，基本上你使用图像将尺寸翻倍，将 jpg 压缩为 20 左右，使用 CSS 将图像缩小一半，您仍然可以获得漂亮的图像，无论是正常显示还是视网膜显示。与原始尺寸图像相比，重量也减少了 25%！
我自己对此进行了测试，我可以说它运行良好，在极少数情况下，我的重量比正常尺寸的图像重，而且重量可以忽略不计（与易用性和好处相比）。

【问题讨论】：

截图？关联？什么？

标签： css image joomla responsive-design retina-display

【解决方案1】：

使用多种技术组合来做到这一点：

【讨论】：

【解决方案2】：

很长的问题，但如果它只是关于不同尺寸图像的居中，你可以这样做：

您需要浮动的 Div，它们将具有相同的高度和宽度（但是您可以针对不同的查询进行调整）。

之后，每个 div 中都有另一个 div 用于垂直和水平中心：

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

基本上，您浮动外部 div，将 display table-cell 应用于 .table div，然后应用垂直居中对齐，用于垂直居中。

重要

带有 display:table 单元格的浮动 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 替换为带有图像的类图像。

【讨论】：