image - css 确定一个容器中的单个和多个图像

Question

我目前正在构建一个博客，并像您一样为每篇博文创建一个图像容器，它可能只包含一个或可能包含多个图像。

我已经在谷歌上搜索了一段时间，试图找到一个处理我的场景的纯 css 解决方案:

如果我有一张图片，它会拉伸(stretch)到 100% 宽度或高度保持纵横比，很容易通过通常的修复解决，顺便说一下，谷歌返回的所有内容:

#img-container{ overflow:hidden }
#img-container img{ 
   width:auto; 
   height:auto; 
   max-width:100%; 
   max-height:100%;
   margin:0 auto;
}

如果我有多个图像，它们将被放置在网格中，每行最多 3 张图像，宽度约为容器的三分之一或一半(取决于数量)。

我知道我可以做一些 php 计数和单独的类，但更愿意一个全 css 解决方案。

我读过有关 flex-box 的内容，但对此知之甚少，但据我所知，我相信这可能是答案？？

非常感谢任何帮助，如果您觉得没有针对动态图像数量的纯 css 解决方案，请务必说明，我将恢复为 (js || php) && css

谢谢

此外，这应该尽可能跨浏览器兼容，但我想这是大多数人所期望的。

Answer 1

这里有一个基于倒数第 n 个 child 的技巧。

Lea Verou reference link引用了这个 original link

div {
    width: 50%;
    height: 150px;
    margin: 10px auto;
    margin-bottom: 25px;
    overflow: hidden;
}

img {
float: left;
}

img:nth-child(1):nth-last-child(1) {
    width: 100%;
}
/* two items */
img:nth-child(1):nth-last-child(2), 
img:nth-child(2):nth-last-child(1) {
    width: 50%;
}
/* three items */
img:nth-child(1):nth-last-child(3), 
img:nth-child(2):nth-last-child(2), 
img:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

<div>
    <img src="http://lorempixel.com/150/150/sports/1/" alt="" />
</div>
<div>
    <img src="http://lorempixel.com/150/150/sports/1/" alt="" />
    <img src="http://lorempixel.com/150/150/sports/2/" alt="" />
</div>
<div>
    <img src="http://lorempixel.com/150/150/sports/1/" alt="" />
    <img src="http://lorempixel.com/150/150/sports/2/" alt="" />
    <img src="http://lorempixel.com/150/150/sports/3/" alt="" />
</div>