具有可伸缩性的水平图像滚动

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

我真的很新，所以任何帮助将不胜感激什么是最有效的方式来做到这一点？在adavnce

许多感谢的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; 
}

来源

2012-01-10 Dean Pauley

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

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

来源

2012-01-10 15:22:20 SamStar

具有可伸缩性的水平图像滚动

回答

相关问题