javascript - 具有无限水平滚动的可调整大小的流体图像(修订版 2)

Question

我用一个简单的水平“nowrap”css 编写了一个站点，其中 img 并排 float 。我也隐藏了滚动条。 侧滚可以通过正常的垂直鼠标滚轮滚动来完成(见我的元素网址

因为图像都是 1400x850 像素的大分辨率，所以我想创建一个可以根据浏览器大小缩放图像的网站。目前所有的图像都是最大宽度:100%，我的目标是在浏览器较小时将它们缩放到该百分比以下。

我尝试使用 max-width:100% 自动设置宽度和高度。它不起作用。

我尝试使用 jquery 流体图像脚本，由于“nowrap”，它们无法正常工作

下面是我使用的主要代码:

#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

这是我元素的链接:http://credencepartners.com/demo02/

这是我尝试生成的结果(例如请参阅评论):http://credencepartners.com/demo02/interface/scene01.jpg

我需要在此场景上实现 javascript 还是可以使用 CSS？

---

更新/2012 年 8 月 10 日

感谢 Corey 提醒，我已经更新了我的 demo02 链接。现在的问题只是在图像下方添加文本。我尝试使用 div 类将文本和图像组合在一起，结果导致图像再次变得不流畅。现在我需要帮助制作流畅且可重新调整大小的 div 标签。

---

目标

知道构建一个典型的水平侧滚动网站是非常简单的。我遇到的主要问题只是顶部的可调整大小的流体图像。我对流畅/响应式布局很陌生，希望这里的专家能启发我 :)

Answer 1

使用这个 CSS:

body, html {
    width:100%;
    min-height:100%;
    height:auto !important;
}
#content {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio ul{
    width:100%;
    height:100%;
    display:block;
    white-space:nowrap;
    overflow:auto;
    list-style:none;
    padding:0;
    margin:0;
    text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
    width:auto;
    height:100%;
    display:inline-block;
    position:relative;
}

然后像这样布置您的 html:

<div id="content">
    <div id="portfolio">
        <ul>
            <img src="src.jpg" />
            <img src="src.jpg" />
            <img src="src.jpg" />
        </ul>
    </div>
</div>