如何在仅具有CSS并支持视网膜显示的响应网格中居中图像？ [英] How to center images in a responsive grid with CSS only and supporting retina displays?
问题描述
我有一个页面，我需要在响应式网站上显示照片库，同时支持视网膜显示。
网格必须由以这种方式按比例填充给定容器的块组成：
-
如果屏幕宽度> = 1200px网格必须由4列组成（每个块的宽度为25％） -
如果屏幕宽度< 1200px和> = 768px网格必须由3列组成（每个块的宽度为33％） -
如果屏幕宽度是< = 767px网格必须由2列组成（每个块的宽度为50％）
所有网格块必须采用2：3比例大小，并且测量一个具有1980px宽视口的网格块我可以告诉你大约500px（这不是一个限制，它只是一个有用的测量数据我想我需要什么如下所述。
当然可以通过 @media 查询轻松实现，并使用 padding-top：66.66666666666667％ 为2：3的比例;我试图尽可能多地给你数据来解释我必须尊重的限制。
所以这里有一个棘手的部分：
网格的缩略图具有各种尺寸和纵横比，我需要将它们放在各自的网格块中，垂直和水平，同时适合/覆盖整个网格块区域。
由于网格是响应的，我需要拇指按比例缩放以及它们用于缩小视口的块。
为了使事情更加复杂，我需要支持视网膜显示，因此拇指必须是双倍尺寸并缩小一半，并且也适合它们的网格块。 / p>
如何实现这一目标？ （最好只通过CSS）
其他数据：
I我正在使用joomla！ 2.5作为这个项目的CMS，我需要给我的客户端一个非常简单的方法来添加图像。我找到的最好和最简单的解决方案是简单图像库：我对这个插件的唯一需求是页面中的自动拇指生成程序+自动生成的< ul> 网格，根据我的需要覆盖HTML + css输出结构非常简单。
对于视网膜显示器，提供正确的@ 2x语法应该更好，但是我真的不在乎;至于性能问题，我认为给所有显示单个缩小图像更容易处理，当然，也是一种非常有效和高效的方法来处理img权重！
请参阅此参考，基本上您使用尺寸加倍且jpg压缩为20左右的图像，使用CSS将图像缩小一半，您仍然可以看到漂亮的图像，适用于正常和视网膜显示。另外，原始尺寸图像的重量减轻了25％！
我自己测试了这个，我可以说它运行得很好，在很少的情况下，我的体重比正常大小的图像，以及可忽略的数量（与易用性和好处相比）。
使用技术组合来做到这一点：
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:
If the screen width is >= 1200pxthe grid must be composed by 4 columns (25% width for each block)If the screen width is < 1200px and >= 768pxthe grid must be composed by 3 columns (33% width for each block)If the screen width is <= 767pxthe grid must be composed by 2 columns (50% width for each block)
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.
How can this be achieved? (preferably only via 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.
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屋！
