自适应网页设计技术之一是设置标记元素的大小。
占包含它们的容器大小的百分比。 由此，当调整浏览器窗口的大小时，实现了所有元素的按比例调整大小。 如果仅指定水平尺寸（例如页面布局），那么在正确水平放置元素很重要时，我们显然可以预测元素的实际水平尺寸。 但是，也许我们不能提前说出它们的垂直尺寸（当然，如果没有明确设置高度）。 从这里开始以下任务-如何保持元素的比例？
一个简单的实践例子。 该页面包括三列：左垂直菜单，图片，右垂直菜单。
调整窗口大小时，图片应拉伸（缩小），并保留在左右菜单之间的空间中。 反过来，菜单项应以正方形区域表示，当调整窗口大小时，菜单区域应保持正方形：
我们可以用两个无序列表和一个图像来表示页面：
<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul>
将列表的宽度设置为4％：
.left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0; } .right-navigation { float: right; } .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer; }
和图片92％：
.picture { box-sizing: border-box; padding: 30px; width: 92%; float: left; } .picture img { width: 100%; }
结果，页面将如下所示：
调整窗口大小时，图像和菜单将调整大小，但是
可以看出菜单项不是正方形的。 这是自然的，因为我们所做的只是将菜单的宽度设置为百分比，而将项目高度的安装留给了渲染算法。
当然，您可以以绝对单位显式设置菜单项的尺寸。 他们将获得所需的正方形形状，但布局将失去自适应属性。 只需用百分比表示高度即可：
width: 4%; height: 4%;
也不是解决方案，因为父元素的宽度和高度（在我们的例子中是body）通常不相同。
解决该问题的方法是基于某种有点自相矛盾的事实，即标记元素内部的填充（如果以百分比表示）是相对于该元素的宽度计算的。 矛盾的是，此语句不仅适用于水平缩进，还适用：
padding-left, padding-right
，也可以是垂直缩进：
padding-top, padding-bottom
我们需要的下一步是:: after伪选择器。 它将在我们的元素内添加一个零高度的伪元素，该元素沿宽度方向延伸。 如果我们将此伪元素的padding-top或padding-bottom设置为100％，则缩进值将设置为等于父元素的宽度（在本例中为li）。
.left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%; }
结果，拉伸后的元素的高度将等于其宽度，并且菜单项将变为正方形：
要在菜单项内添加内容，我们使用绝对定位：
.left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%; } .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%); }
结果，页面将采用所需的形式：
最重要的是，调整窗口大小时，菜单项将保持正方形。