我在 HTML 中有一个 div,这个 div 的宽度为 100%。在这个 div 中我有很多图片,我想并排显示它们。
例子:
Resolution of: 1000px (display 5 images side by side (200px width)) from 6 create a new row
并且图片填充屏幕上的空白区域,因此用户只能看到图像而看不到白色背景。
谢谢。
最佳答案
float 图像并使宽度为 20%..
<div class="container">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<img src="6.jpg"/>
</div>
和CSS
.container{overflow:hidden;}
.container img{
width:20%;
float:left;
}
演示在 http://jsfiddle.net/R5sq4/
更新 因为评论提到在大屏幕上图像会太大..
所以也许您想为图像设置最小/最大宽度并强制它们在遵守这些限制的同时填充页面..
您需要为此编写一些脚本。
$(function(){
var min = 200,
max = 300,
container = $('.container'),
images = container.children('img');
$(window).resize(function(){
var w = container.width(),
minfit = 100 / Math.floor(w / min),
maxfit = 100 / Math.floor(w / max);
images.css({width:Math.min(minfit,maxfit)+'%'});
}).resize();
});
用这个CSS
.container{overflow:hidden;}
.container img{
float:left;
}
关于jquery - 并排显示图像 100% 屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21203728/