並排顯示圖像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/