1

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

  • 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 的比例；我试图为您提供尽可能多的数据来解释我必须遵守的限制。

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

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

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

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

4

2 回答 2

1

使用多种技术组合来执行此操作：

于 2013-01-03T18:43:39.143 回答
0

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

您需要浮动的 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 替换为带有图像的类图像。

于 2013-01-03T17:18:58.030 回答