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）＆amp;＆amp; CSS

感谢

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

Answer 1

以下是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

Answer 2

有一个基于最后一个孩子的技巧可以在这里工作。

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>

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

2 个答案: