多个图像使用 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 中这是一种处理它的方法吗？

p.s。我不想使用 table 和背景图像，因为 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. It's really useful and can be mastered to make almost any kind of grid you want. Wrap all images in container class with display:flex and for each img element set flex:1. This is the simplest way. If you need to adjust it, read about it, it's great! 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>

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

Multiple images fill screen width using CSS

html

css

image

width

screen