多個圖像使用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>