图片水平排列的大小调整窗口大小

Question

我做了水平排列的图像的一个简单的例子：

所有的图像调整到“包装” div的高度。 http://i.imgur.com/VOA1pBG.png

然而，当我使窗口变小，图像开始出来的div及以下去，因为这样的： http://i.imgur.com/VKUA4Ju.png

我想让它使我使窗口变小，图像变小。水平放置在浏览器的大小上。 这里是用来使现有页面的代码：

HTML：

<h1> Thriller </h1> 

    <div id="week-wrap"> 
    <div id="sunday" class="day"><img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"></div> 
    <div id="monday" class="day"><img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg"></div> 
    <div id="tuesday" class="day"><img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"></div> 
    </div> 

CSS：

body{margin: 0 auto;} 
#week-wrap {border: 1px solid #000; height: 300px;} 
.day {float: left;} 
img {height: 100%;} 

Answer 1

代替float: left使用display: inline-block的申报单。然后，将white-space: nowrap添加到容器中。

http://jsfiddle.net/ExplosionPIlls/uYTxW/

Answer 2

尝试调整窗口大小调整图像的div使用javascript：

$(window).bind("resize", function(){ //Adjusts image when browser resized 
    // do your image size logic here 
    // $('#week-wrap').width(); // width of div container 
}); 

Answer 3

我会主张每个图像消除周围的div。您可以直接设置图像的样式。此外，不要在包装上设置明确的高度，而应设置overflow：hidden来建立块格式上下文，以便自动扩展以包含浮动内容。

你风与标记，如：

<h1> Thriller </h1> 

<div id="week-wrap"> 
    <img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg" id="sunday" /> 
    <img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg" id="monday" /> 
    <img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg" id="tuesday" /> 
</div> 

和CSS一样：

body{margin: 0 auto;} 
#week-wrap {border: 1px solid #000; overflow: hidden; } 
#week-wrap > img { width: 33.333%; height: auto; float: left;} 

这个结果：http://jsfiddle.net/4Aytd/

var imageSizer = function() { 
    var images = document.querySelectorAll('#week-wrap > img'), 
     numImages = images.length, 
     imageWidth = (100/numImages) + '%', 
     i; 
    for(i = numImages-1; i >= 0; i--) { 
     images[i].style.width = imageWidth; 
    } 
}; 

http://jsfiddle.net/4Aytd/4/