Question

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

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

我尝试在auto中使用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

我试了一下然后发现：

您需要从图像中删除高度和宽度标记
使用jQuery / JavaScript

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

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

2 个答案: