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

Question

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

我已经在谷歌上搜索了一段时间，试图找到一个纯 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

谢谢

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

Answer 1

这里有一个基于 nth-last 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>

Answer 2

这是另一个 Paulie_D 的示例，使用 flexbox 和不同的 :nth-child 方法。

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

但它确实依赖于包裹在每个 img 周围的元素...

hr {
    margin: 20px 0;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
}

.wrap div {
    flex-grow: 1;
    min-width: 33.33%;
}

.wrap div:nth-child(3n+4),
.wrap div:nth-child(3n+5){
    width: 33.33%;
    flex-grow: 0;
}

.wrap div img {
    width: 100%;
}

<h3>Seven items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr>
<h3>Six items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr> 
<h3>Five items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr> 
<h3>Four items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr> 
<h3>Three items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr>
<h3>Two items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
    <div><img src="http://placehold.it/100x100"></div>
</div>
<hr>   
<h3>One items</h3>
<div class="wrap">
    <div><img src="http://placehold.it/100x100"></div>
</div>

浏览器之间的 flexbox 实现存在一些不一致，所以mixing old and new syntax may be required (more info)

JSFiddle version