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

【问题标题】：Multiple images fill screen width using CSS多个图像使用 CSS 填充屏幕宽度
【发布时间】：2016-04-14 17:23:49
【问题描述】：

我有多个图像要连续显示，填充屏幕宽度：

<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 处理它的一种方式吗？

附言我不想使用 table 和 background-image，因为 js 插件需要将它们作为 img 查找，而且 img 标签也是谷歌友好的......

【问题讨论】：

只写 img { max-width:25%;高度：自动； } 在你的 CSS 代码中。
正如我所说，有些页面我有 5 张图片，需要 max-width:20%，当我有 100 多个类似页面时，这不是很可扩展，

标签： html css image width screen

【解决方案1】：

我建议您使用flexbox。它真的很有用，可以掌握几乎任何你想要的网格。用display:flex 和每个img 元素集flex:1 包装容器类中的所有图像。这是最简单的方法。如果您需要调整它，请阅读它，这很棒！ Example here

.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-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
</div>
<br/>
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
</div>

【讨论】：

【解决方案2】：

没有纯 CSS 方法来解决它。小 jQuery 可以为您做到：

$(parentElem).each(function() {

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

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

});

其中 parentElem 是您的图像的容器。 jQuery each 在此处循环，以防您的页面上有多行图像。

【讨论】：