響應網頁設計：動態高度

Question

我有以下頁面作爲一個例子爲響應式佈局：flexible Grid

現在我想我自己的項目做與此相同頁面上的圖像。隨着屏幕尺寸的減小，元素也應該調整大小。

對於這些元素的寬度，一切正常。但他們的身高不會改變。 我不知道該示例頁面的作者是如何實現這一點的，因爲他甚至不在他的圖像上使用單個高度屬性。

這裏是我的代碼：

• HTML

  <div id="wrapper"> 
  <ol> 
      <li id="el-1" class="figure"><div class="element"><p class="heading">Lorem1</p></div></li> 
      <li id="el-2" class="figure"><div class="element"><p class="heading">Lorem2</p></div></li> 
      <li id="el-3" class="figure"><div class="element"><p class="heading">Lorem3</p></div></li> 
      <li id="el-4" class="figure"><div class="element"><p class="heading">Lorem4</p></div></li> 
      <li id="el-5" class="figure"><div class="element"><p class="heading">Lorem5</p></div></li> 
      <li id="el-logo" class="figure"><div class="background"><p>LoremIpsum<br>Lorem</p></div></li> 
      <li id="el-6" class="figure"><div class="element"><p class="heading">Lorem6</p></div></li> 
      <li id="el-7" class="figure"><div class="element"><p class="heading">Lorem7</p></div></li> 
      <li id="el-8" class="figure"><div class="element"><p class="heading">Lorem8</p></div></li> 
      <li id="el-9" class="figure"><div class="element"><p class="heading">Lorem9</p></div></li> 
      <li id="el-10" class="figure"><div class="element"><p class="heading">Lorem10</p></div></li> 
  </ol> 
  

• CSS

http://nopaste.info/d8a051e767.html

Answer 1

示例頁面正在使用圖像，而不是。那麼你就不能用它作爲例子。在你的情況下，如果你沒有給你的div設置任何高度，它們將會增長以使它們的內容合適。所以，讓他們一起調整您可以使用一個表或使用JavaScript（檢查例如匹配列）

Answer 2

其

img { 
    max-width: 100%; 
} 

在離現場，flexible.html線

它使圖像的寬度與包含的A一樣，並且圖像可以自動縮放。

但是其他元素不這樣做，所以您只能對圖像執行此操作。