如何在仅使用 CSS 并支持视网膜显示的响应式网格中居中图像? [英] How to center images in a responsive grid with CSS only and supporting retina displays?

问题描述

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

I have a page where I need to display a photo gallery in a responsive website, with support for retina displays too. The grid must be composed by blocks that fill a given container proportionally in this way:

• 如果屏幕宽度 >= 1200px 网格必须由 4 列组成(每个块的宽度为 25%)
• 如果屏幕宽度<1200px 和 >= 768px 网格必须由 3 列组成(每个块的宽度为 33%)
• 如果屏幕宽度 <= 767px 网格必须由 2 列组成(每个块的宽度为 50%)

• If the screen width is >= 1200px the grid must be composed by 4 columns (25% width for each block)
• If the screen width is < 1200px and >= 768px the grid must be composed by 3 columns (33% width for each block)
• If the screen width is <= 767px the grid must be composed by 2 columns (50% width for each block)

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

All the grid blocks must be in 2:3 ratio sizes, and measuring a grid block with a 1980px wide viewport I can tell you is around 500px (this is not a limit, it's just a measure data useful I think for what I need explained below).
This can be easely achieved via @media queries of course, and using padding-top: 66.66666666666667% for the 2:3 ratio; I'm trying to give you as much data as I can to explain the limits I must respect.

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

So here comes the tricky part:
the thumbnails for the grid are of various sizes and aspect ratios, and I need to center them in their respective grid blocks, vertically and horizzontally, while fitting/covering the whole grid block area.
Since the grid is responsive, I need the thumbs to scale proportionally along with their block for narrow viewports.
To complicate things even more I need to support retina displays, so the thumbs must be double in size and downscaled by half, and fit in their grid blocks too.

如何实现?(最好仅通过 CSS)

How can this be achieved? (preferably only via CSS)

其他数据:
我正在使用 joomla！2.5 作为这个项目的 CMS，我需要给我的客户一个非常简单的方法来添加图像.我发现的最好和最简单的解决方案是 Simple Image Gallery:我对这个插件的唯一需要是自动拇指生成程序 + 自动生成页面中的

网格，并且非常简单根据我的需要覆盖 HTML+css 输出结构.

Additional data:
I'm using joomla! 2.5 as CMS for this project, and I need to give my client a very simple way to add images. The best and easiest solution I found is Simple Image Gallery: the only need I have for this plugin is the auto thumbs generating procedure + auto generated <ul> grid in the page, and is very simple to override the HTML+css output structure for my needs.

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

As for retina displays, it should be better to provide a correct @2x syntax, but I don't really care; as for performance concerns, I think that giving for all display a single downscaled image is more easy to handle, of course, but also a really effective and efficient way to handle the img weight!
See this for reference, basically you use images with dimensions doubled and a jpg compression of 20 or so, downscale the image by half with CSS, and you still have a nice looking image, good for both normal and retina displays. Also with a reduced weight from the original size image by up to 25%!
I've tested this myself and I can tell that this is working quite well, in very few cases I had more weight than a normal sized image, and by negligible amounts (compared to the ease and benefits).

推荐答案

使用组合技术来做到这一点:

Use a combination of techniques to do this:

• 适合和收缩技术
• 将图像置于框内
• 内联块拇指

这篇关于如何在仅使用 CSS 并支持视网膜显示的响应式网格中居中图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！