我有多个图像连续显示,以填充屏幕宽度:
<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友好的...
答案 0 :(得分:1)
没有纯CSS方法可以解决它。小jQuery可以为你做到这一点:
$(parentElem).each(function() {
var itemsCount = $(this).children().length;
var childrenWidth = 100 / itemsCount + '%';
$(this).children().css('width', childrenWidth);
});
其中 parentElem 是图像的容器。如果您的页面上有多行图像,则jQuery each
会循环显示。
答案 1 :(得分: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>