问题:元素宽度随着浏览器改变时, 高度仍然保持不变,致使内部图片变形;
上下padding的值,相对于最近父级的宽
2:flex布局,未设置高的具体值的时候,其值等于子级内容最大的高度
3: 伪类,content为空,宽高为0,不占据位置,也不产生多余的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css定宽高比 flex + 伪类 + padding</title>
<style>
.wrapper {
width: 200px;
background-color: pink;
display: flex;
}
.wrapper:after {
content: '';
padding-top: 100%; // 通过计算来设置高度相对于宽度的百分比
}
</style>
</head>
<body>
<div class="wrapper">内容</div>
</body>
</html>