Html 水平对齐的图片可根据窗口大小调整大小

我制作了一个水平对齐图像的快速示例：

所有图像都会根据“包裹”div的高度进行调整。

然而，当我将窗口缩小时，图像开始从div中出来，并在下面显示：

我想让它，因为我使窗口变小，图像变小。以水平方式适应浏览器的大小。 以下是用于创建现有页面的代码：

html:

---

对div使用

display:inline block

，而不是

float:left

。然后，将

空白：nowrap

添加到容器中

---

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

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

---

我主张删除每个图像周围的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>

因此：

---

这部分解决了问题，但不是完全解决。我希望所有图像在当前窗口大小内可见。所以这需要图像随着窗口变小而缩小。这很好，但我不希望它们继续扩大。此外，考虑到图像的数量总是会发生变化，who 33.3%的事情有点冒险。您可以设置图像的最大宽度，以确保它们不会过度扩展。对于不同数量图像的问题，您可以手动更新样式，也可以像我刚才添加的方法一样提出更动态的解决方案（IE<8不支持querySelectorAll）：

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

<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>

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

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;
    }
};