并排显示图像 100% 屏幕

Question

我有一个 HTML 的 div，这个 div 的宽度是 100%。在这个 div 中我有很多图片，我想并排显示它们。

例子：

Resolution of: 1000px (display 5 images side by side (200px width)) from 6 create a new row 

并且图片填充了屏幕上的空白区域，因此用户只能看到图像而不是白色背景。

谢谢。

Answer 1

浮动图像并使其宽度为 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;
}

http://jsfiddle.net/R5sq4/1/ 上的演示