Показать изображения бок о бок 100% экран

Question

У меня есть div в HTML, этот 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/