具有无限水平滚动的流体可调整大小图像(修订版 2)
Fluid resizable image with infinite horizontal scroll (REV. 2)
我用一个简单的水平"nowrap"css编写了一个网站,其中img并排浮动。我还隐藏了滚动条。侧滚动可以通过正常的垂直鼠标滚轮滚动来完成(请参阅我的项目 url
由于图像的分辨率均为 1400x850 像素,因此我想创建一个根据浏览器大小缩放图像的网站。目前所有图像都是最大宽度:100%,我的目标是在浏览器较小时将它们缩放到该百分比以下。
我尝试在自动中使用最大宽度: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?
更新/10th Aug 2012
感谢科里的提醒,我已经更新了我的 demo02 链接。现在的问题只是在图像下方添加文本。我尝试使用div 类将文本和图像组合在一起,结果导致图像再次变得非流动。现在我需要帮助制作一个流畅且可重新调整大小的div 标签。
目标
知道建立一个典型的水平横向滚动网站非常简单。我遇到的主要问题只是顶部的流体可调整大小的图像。我对流畅/响应式布局很陌生,希望这里的大师可以启发我:)
使用此 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>
我尝试了一下,发现:
- 您需要从图像中删除高度和宽度标签
- 您可以使用jQuery/JavaScript将"portfolio"-div的高度设置为窗口高度
一定是这样,希望我明白你的意思
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- 压缩phonegap中ios的图像插件
- 具有无限水平滚动的流体可调整大小图像(修订版 2)