可伸縮側滾動問題

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

可伸縮側滾動問題

回答

相關問題