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。我不想使用表和背景图像，因为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包装容器类中的所有图像。这是最简单的方法。如果您需要调整它，请阅读它，它太棒了！ 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

2 个答案: