具有可伸縮性的水平圖像滾動

我想創建一個水平滾動圖像面板，其中包含最大高度爲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

具有可伸縮性的水平圖像滾動

回答

相關問題