图像自动填充容器div无论图像的数量

Question

我想创建一个容器div并添加“X”数量的图像。但无论内部的图像数量如何，它们将始终均匀地填满整个容器。

继承人更好地理解图像：

HTML/CSS仅是最好的，但我当然会开放给其他的想法。在这个新的排序，所以任何帮助将是伟大的。

Answer 1

你可以用CSS做到这一点。诀窍是使图像float:left;的width:50%;。如果最后一张图像恰好是一张奇数图像，那么我们需要将其全幅放大。这是通过使用选择器img:last-child:nth-child(odd)完成的。

以下是图像完整的CSS：

CSS

img { 
    float:left; 
    width:50%; 
} 

/* 
* This makes the last image (if odd) 
* full width. 
*/ 
img:last-child:nth-child(odd) { 
    width:100%; 
} 

/* 
Special rules for 2 images 
*/ 

div.container > img:first-child:nth-last-child(2) { 
    width:100%; 
} 

div.container > img:last-child:nth-child(2) { 
    width:100%; 
} 

而这里的全demo。