android - 如何制作响应式图像网格，这些图像不会以小屏幕分辨率堆叠在一起

Question

我已经在 SO 上看到这个作为类似问题发布，所以如果我的问题听起来有点多余，请原谅我。我相信不是。

我有一个尺寸不统一的图像网格。我正在尝试使用 CSS 响应式地缩小图像网格，因此当在不同的屏幕尺寸(主要是 Android 平板电脑)上查看时，图像都会均匀缩小并且不会相互堆叠。我尝试将 max-width:100% 应用于应用于标签的类，但它仅适用于真正的大图像，但不适用于较小的图像，它只是堆叠它们。这是网址:http://www.thebeachschool.eq.edu.au/freshwater-app/ (转到贡献者选项卡)。下面是我的 CSS:

div#contributor-row-1, div#contributor-row-2, div#contributor-row-3 {max-width: 100%; margin-bottom: 20px; text-align: center; }
div#contributor-row-4 {max-width: 100%; text-align: center;}
div#contributor-row-1 img {padding-right:20px; max-width: 100%; }
div#contributor-row-2 img {padding-right:25px; max-width: 100%;}
div#contributor-row-3 img {padding-right:17px; max-width: 100%;}
div#contributor-row-4 img {padding-right:8px; max-width: 100%;}

完整的 HTML 有点乱，但简单地说它看起来像这样:

<div id="contributor-row-1">
<img><img><img><img>
</div>
<div id="contributor-row-2">
<img><img><img><img>
</div>
<div id="contributor-row-3">
<img><img><img><img>
</div>
<div id="contributor-row-4">
<img><img><img><img>
</div>

由于图像大小不统一，这让我的生活很艰难，我认为我无法实现我想要的。我尝试使用此处的解决方案 Grid-like, Multiple Responsive Images但它处理的是大小相同的统一图像网格。

我的问题是，对于所有可能的像素分辨率断点，是否有不使用媒体查询的 CSS 解决方案？如果我使用的所有图像大小相同，我会很高兴，但它们是组织的 Logo ，而且尺寸都不同。

Answer 1

将 max-width: 100% 设置为图像，并将 width: 100% 设置为父 anchor :

div#contributor-row-1 a { width: 100%; }
div#contributor-row-1 img { padding-right: 20px; max-width: 100%; }

编辑检查this jsfiddle , 希望有所帮助