可伸缩侧滚动问题

我想创建一个水平滚动图像面板，其中包含最大高度为800px的大图像。当浏览器调整大小时，我希望根据浏览器窗口的大小将整个图像选择变得更小/更大。我希望图像的顶部在页面顶部悬挂200px，左侧（加载页面时）为30px，底部为30px。可伸缩侧滚动问题

我真的很新的这所以任何任何帮助，将不胜感激

的HTML看起来像这样至今：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Dean Pauley — Recent work</title> 
     <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
     <div id="infoleft"> 
      <ul> 
       <li><a href="index.html">Dean Pauley</a></li> 
       <li>Graphic Design</li> 
      </ul> 
     </div> 
     <div id="inforight"> 
      <ul> 
       <li><a href="#">Information</a></li> 
      </ul> 
     </div> 
     <div id="images"> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
     </div> 
    </body> 
</html>

的CSS：

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    font-family: 'Questrial', sans-serif; 
} 

#infoleft { 
    position:fixed; 
    top:20px; 
    left:0px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
} 

#infoleft ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#infoleft ul li { 
    display: inline; 
    padding: 30px; 
}  

#inforight {  
    position:fixed; 
    top:20px; 
    right:30px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
} 

#inforight ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#images { 
    position:absolute; 
    left:20px; 
    bottom:30px; 
    top:200px; 
    width:25000px; 
    height:800px; 
    padding-top:100px; 
    padding-bottom:30px; 
} 

img { 
    padding:10px; 
} 

a { 
    text-decoration:none; color:#000; 
} 

a:hover { 
    color:#0080ff; 
}

什么最有效的方法来做到这一点？在adavnce非常感谢

编辑

On page load

On scroll

On 75% decrease window

在页面加载

在滚动

减少75％的窗口

来源

2012-01-10 Dean Pauley

你想让这些图像适合屏幕内容，还是可以在浏览器窗口上滚动条？ – 2012-01-10 14:28:55

@Zack Macomber我想滚动到右侧来查看图像，但高度应该相应地进行调整，以便图像上方总是有200像素，下方是30像素，我希望这很有意义 – 2012-01-10 14:34:51

我想你已经解释得很清楚了，但我只是没有看到它......有无论如何，你可以展示你想要的截图模型？如果你可以制作一些简单的JPEG文件来显示页面应该看起来像全屏，然后在浏览器调整50％时看起来应该是什么样子，这对于我来说是有帮助的。 – 2012-01-10 14:49:16

我会将与图像相关的尺寸测量结果更改为％，而不是px。这样，图像，填充，边距等的大小将随浏览器窗口的大小而变化，但比例将保持不变。

示例：img {width：80％;高度：60％;等}

编辑

使用Zack的答案的一部分，我想你的CSS IMG规则更改为：

img { padding:10px; width:3.799; height:100%; }

这会给你的浏览器窗口中调整图像尺寸。但是，您需要使用百分比（％）来调整您的定位规则（即左，顶部，填充，边距等）以保持所有比例相同。

注意

在这一点上，我只是调整的例子，所以备案扎克的设计更高效，如果看你满足会更好。

来源

2012-01-10 15:39:53 SamStar

你能否展示一个关于上面代码的例子？ – 2012-01-10 15:51:30

当然，但在我检查我的内容并发布之前，你是否确实要将25000px的宽度放在#images上？ – SamStar 2012-01-10 16:05:25

将会有更多的项目被添加。总的来说，他们可能不会占用那么多，虽然 – 2012-01-10 16:08:37

如何像这些变化对你的CSS的“#images”和“IMG”版面...

#images { 
    position:absolute; 
    left:20px; 
    bottom:30px; 
    top:200px; 
    border: 2px ridge gray; 
    width: 90%; 
    display: inline-block; 
    overflow: scroll; 
    white-space: nowrap; 
} 

img { 
    padding:10px; 
    width:50%; 
    height:95%; 
}

你可以玩的那些价值观，但你应该得到一个水平滚动的图像部分改变窗口的大小...

你可以把灰色边框关闭，如果你想 - 我只是用它来测试...

编辑

上传的绝对定位的代码示例，而不是相对作为保持图像部分30px离开底部...

来源

2012-01-10 16:47:38

可伸缩侧滚动问题

回答

相关问题