1

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

所有图像都调整为“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%;}
4

3 回答 3

2

而不是float: left用于display: inline-blockdiv。然后，添加white-space: nowrap到容器中。

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

于 2013-05-18T23:49:50.657 回答
0

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

$(window).bind("resize", function(){  //Adjusts image when browser resized  
    // do your image size logic here
    // $('#week-wrap').width(); // width of div container
});
于 2013-05-19T00:03:43.170 回答
0

我会提倡删除每个图像周围的 div。您可以直接设置图像样式。此外，不要在包装器上设置显式高度，而是设置溢出：隐藏以建立块格式化上下文，以便它自动扩展以包含您的浮动。

你最终会得到如下标记：

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

于 2013-05-19T00:11:58.803 回答