1

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

因为图像都是 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 标签。

目标

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

4

2 回答 2

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>
于 2012-08-08T07:57:14.800 回答
0

我试了一下，发现：

  1. 您需要从图像中删除高度和宽度标签
  2. 您使用 jQuery/JavaScript 将“portfolio”-div 的高度设置为窗口高度

应该就是这些了，希望我明白你的意思

于 2012-08-08T07:57:21.117 回答