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%;
}

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

它使图像宽度与包含A和图像自动缩放..

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

响应式网页设计：动态高度

2 个答案: