Question

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

所有图像均调整为“wrap”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作为div。然后，将white-space: nowrap添加到容器中。

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

Answer 2

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

$(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/

水平对齐的图片大小调整窗口大小

3 个答案: