[英]Multiple images fill screen width using CSS
I have multiple images to show in a row that filled screen width: 我有多张图片要连续显示以填满屏幕宽度:
<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%">
In some pages I have 4 images but some have 5 , 6 , etc. 在某些页面中,我有4张图片,但有5张 , 6张等。
I don't want to change max-width for every pages so is that a way in CSS to take care of it? 我不想更改每个页面的最大宽度,所以这是CSS中的一种方法吗?
ps I don't want to use table and background-image since a js plugin need find them as img, also img tag is google-friendly too... ps我不想使用表格和背景图片,因为js插件需要将它们作为img查找,而且img标签也是Google友好的...
There is no pure CSS way to solve it. 没有纯粹的CSS方法可以解决它。 Little jQuery can do it for you: 小jQuery可以为您做这件事:
$(parentElem).each(function() {
var itemsCount = $(this).children().length;
var childrenWidth = 100 / itemsCount + '%';
$(this).children().css('width', childrenWidth);
});
where parentElem is container for your images. 其中parentElem是图像的容器。 jQuery each
loop here in case you have multiple rows with images on your page. jQuery的each
位置的情况下,循环你有你的页面上的图像多行。
I'd suggest you to use flexbox . 我建议您使用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
. 用display:flex
包装容器类中的所有图像,并为每个img
元素集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-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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.