怎么修？垂直调整大小后，全高<li>的宽度未更新</li>

Question

:::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::: UPDATE ::::::::::::::::::::::::::::::::: ::::::::::::::::::::::

我已经应用了一个简单的更新（通过jQuery）我想要在这里完成的任务：

http://jsfiddle.net/3mJPy/

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

正如您所看到的，这演示了初始请求，同时注意水平滚动条大小调整，这是完美的，因为我打算将其用作水平滚动条。但是，现在的问题仍然是我们无法缩小规模，因为容器现在已经应用了大小。

:::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::: / UPDATE ::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::

我想要做的是让<ul>占据页面高度的一定百分比，这样当用户垂直调整浏览器大小时，它的内容（图像）将会缩放。我想保持图像成比例，然后向左推。

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

通过抓住右上方的“顶部区域”并将其向下拖动来测试小提琴，你会看到物品之间的间距/间隙笨拙。但是，如果您使用浏览器刷新页面（运行）并记住拖动框架的位置，那么一切看起来都是正确的。

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