Css 响应性网页设计：动态高度

我将以下页面作为响应式布局的示例：

现在，我想让我自己的项目做同样的图像在这一页上。随着屏幕尺寸的减小，元素也应该调整大小

就这些元素的宽度而言，一切都很好。但它们的高度不会改变。 我想知道示例页面的作者是如何做到这一点的，因为他甚至没有在他的图像上使用任何高度属性

这是我的密码：

• 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>
  

  
  1
  2
  
  Lorem4
  

Lorem5
• LoremIpsum
  Lorem

• Lorem7

• Lorem9

• CSS

---

示例页面在您不使用图像时使用图像。那你就不能用它作为例子了。在您的情况下，如果您不为div设置任何高度，它们将增长以使其内容适合。因此，要使它们一起调整大小，您可以使用表或javascript（例如，检查匹配列）

这是

img {
    max-width: 100%;
}

在ex-site-flexible.html第63行中

它使图像的宽度与包含图像的宽度相同，并自动正确缩放图像

---

但是其他元素没有，因此只能对图像执行此操作。

我忘记删除height:200px属性。这只是为了证明你有什么问题？如果您为图像设置了宽度，但没有设置高度，则图像将以正确的比例调整大小。这将解释示例页面，但如何在非图像元素上应用相同的效果？您不能用那种简单的方式…但我仍然不明白您的问题。谢谢。所以，我能不能得出结论，只有在我不使用图像的情况下，css才能做到这一点？还有，你会推荐什么方法？表还是脚本？如果您现在只想使用包含内容的网格，我建议您使用表。没有理由为此加载脚本。如果您想让它在时间上更加复杂和灵活，那么您可能需要一些js。