html - 怎么修？全高 的宽度在垂直调整大小后不更新

Question

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::更新:::::::::::::::::::::::::::::::::::::::::::::::::::::::

我已经应用了一个简单的更新(通过 jQuery)来实现我在这里要完成的任务:

http://jsfiddle.net/3mJPy/

$( window ).resize(function() {
      $('#gallery li').each(function() {
        $(this).width($(this).find('img').width());
    });
});

如您所见，这演示了初始请求，还要注意水平滚动条大小调整，这非常完美，因为我打算将其用作水平滚动条。但是，现在问题仍然存在，因为容器现在已经应用了大小，所以我们无法缩小到大。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::/更新::::::::::::::::::::::::::::::::::::::::::::::::::::::::

我想做的是有一个 <ul>占据页面高度的一定百分比，以便当用户垂直调整浏览器大小时，它的内容(图像)将缩放。我想让图像保持比例，并向左推。

我遇到的问题是，当垂直调整大小时，<li>似乎保持其初始大小，以便在缩放时，图像与其容器之间现在存在间隙。

通过捕获“顶部区域”上方的 handle 并将其向下拖动来测试 fiddle ，您会看到元素之间的尴尬间距/间隙。但是，如果您使用新的间隙刷新页面(运行)，并且浏览器记住您将框架拖到哪里，那么一切看起来都是正确的。

http://jsfiddle.net/qmUHN/

在调整大小/下拉框架之前:

调整大小/下拉框架后:

Answer 1

据我了解，我希望这是您所期望的:

body {
    overflow-x:scroll;
}
#top {
    background:yellow;
    color:black;
    width:100%;
    height:50%;
    text-align:center;
    text-transform:uppercase;
}
ul#gallery {
    margin:0;
    height:auto;
    background:orange;
    display:inline-block;
    width:100%;
}

ul#gallery li {
    float:left;
    display:block;

}

ul#gallery li img {
    width:100%;
}

Working Demo