多个图像使用CSS填充屏幕宽度

Question

我有多张图片要连续显示以填满屏幕宽度：

<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">

在某些页面中，我有4张图片，但有5张 ， 6张等。

我不想更改每个页面的最大宽度，所以这是CSS中的一种方法吗？

ps我不想使用表格和背景图片，因为js插件需要将它们作为img查找，而且img标签也是Google友好的...

Answer 1

没有纯粹的CSS方法可以解决它。 小jQuery可以为您做这件事：

$(parentElem).each(function() {

    var itemsCount = $(this).children().length;
    var childrenWidth = 100 / itemsCount + '%';

    $(this).children().css('width', childrenWidth);

});

其中parentElem是图像的容器。 jQuery的each位置的情况下，循环你有你的页面上的图像多行。

Answer 2

我建议您使用flexbox 。 它真的很有用，可以熟练制作几乎任何想要的网格。 用display:flex包装容器类中的所有图像，并为每个img元素集flex:1包装。 这是最简单的方法。 如果您需要调整它，请阅读它，太好了！ 这里的例子

 .flexContainer { display:flex; max-height:200px; } .flexContainer > img { flex:1; border:1px solid; margin:1px; } 

 <div class="flexContainer"> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> </div> <br/> <div class="flexContainer"> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-5.jpg"/> <img src="http://lorempixel.com/image_output/technics-qc-640-480-10.jpg" /> <img src="http://lorempixel.com/image_output/food-qc-640-480-3.jpg" /> </div>