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

Question

我目前正在构建一个博客，每个博客都有一个图像容器 post，就像您一样，它可能只包含一个或可能包含多个图像。

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

如果我有一张图片，它会拉伸到 100% 的宽度或高度保持纵横比，很容易用通常的修复方法解决，顺便说一句 google returns:

#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 的内容，但很少 experience/knowledge 但据我所知，我相信这可能是答案？？

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

谢谢

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

Answer 1

有一个基于 nth-last child 的技巧可以在这里使用。

Lea Verou reference link which references this 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

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

css determine single and multiple images in one container

css

image

flexbox

responsive-design