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

我目前正在建立一个博客，每个博客文章都有一个图像容器，就像你一样，它可能只包含一个或多个图像

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

如果我有一张图像，它可以延伸到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

谢谢

---

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

这里有一个基于第n个孩子的技巧

哪个引用了这个

div{
宽度：50%；
高度：150像素；
利润率：10px自动；
边缘底部：25px；
溢出：隐藏；
}
img{
浮动：左；
}
第n个孩子（1）：第n个最后一个孩子（1）{
宽度：100%；
}
/*两项*/
第n个孩子（1）：第n个最后一个孩子（2），
第n个孩子（2）：第n个最后一个孩子（1）{
宽度：50%；
}
/*三项*/
第n个孩子（1）：第n个最后一个孩子（3），
第n个孩子（2）：第n个最后一个孩子（2），
第n个孩子（3）：第n个最后一个孩子（1）{
宽度：33.3333%；
}

---

这里是另一个Paulie_D的例子，使用了

flexbox

和不同的

：第n个子方法

它允许任意数量的元素，但每行不超过三个。如果有三个以上的元素，所有元素的宽度将限制在父元素的1/3，我想这就是你在问题中所要求的

然而，它确实依赖于缠绕在每个
img
周围的元素


hr{
利润率：20px0；
}
.包裹{
显示器：flex；
柔性包装：包装；
}
.包裹部{
柔性生长：1；
最小宽度：33.33%；
}
.wrap div:n个子项（3n+4），
.wrap div:n个子项（3n+5）{
宽度：33.33%；
flex-grow:0；
}
.包裹部{
宽度：100%；
}
7项

六项

五项

四项

三项

两项

一项
CSS无法检测内容，只能设置样式。如果你能为这个问题创建一个小的演示，我们可能会找到一个创造性的解决方案，但目前这个问题有点难以可视化。CSS不能回答条件语句，你要么使用Javascript/JQuery，要么考虑使用SASS，我相信这允许使用条件运算符。谢谢，我理解css中的条件句。你的演示Paulie_D就是我正在做的——一个充满动态图像的div容器。看起来这两个答案都是相关的；将给他们一次尝试，并在测试后选择一个答案。非常感谢各位感谢候补者和跨浏览器资源，我将首先测试Paulie_D的，因为它看起来更适合跨浏览器，但如果我错了，请纠正我。谢谢，看起来不错，正是我想要的。我确实对它做了一些更改，这样图像的大小就不会超过其原始尺寸，我只是添加了
width:auto
，并将
width:100%
更改为
max width:100%
等