具有无限水平滚动功能的可调整大小的图像（REV.2）

Question

我已经用简单的水平“ nowrap” css编码了一个站点，并且img并排浮动了img。 我也隐藏了滚动条。 侧面滚动可以通过正常的垂直鼠标滚轮滚动来完成（请参阅我的项目网址

因为这些图像的分辨率均为1400x850px，所以我想创建一个站点，该站点将根据浏览器的大小缩放图像。 当前所有图像的最大宽度为：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>

Answer 2

我试了一下，发现：

1. 您需要从图像中删除高度标签和宽度标签
2. 您可以使用jQuery / JavaScript将“作品集” -div的高度设置为window-height

那一定是全部，希望我理解你的意思