如下代码如何设置 div.a 的高度 让高度始终保持 宽度的 20%，如何实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>通义千问：如下代码如何设置 div.a 的高度 让高度始终保持 宽度的 20%，如何实现:</title>
	<style type="text/css">
		.con {
			width: 100%;
			position: relative; /* 确保子元素可以相对于此容器定位 */
		}
		.con .a {
			width: 100%;
			padding-top: 20%; /* 高度为宽度的 20% */
			background-color: lightblue; /* 添加背景色以便观察效果 */
			position: relative; /* 确保内容可以正确放置 */
		}
		.con .a > span {
			position: absolute; /* 固定内容到左上角 */
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>

	<div class="con">
		<div class="a">
			<span>a</span> <!-- 将内容放在一个 span 标签中 -->
		</div>
	</div>

</body>
</html>


div没有具体高度 如何使其子元素文本 垂直居中？

#copyright{
  padding-top: 3.43%;
  background: linear-gradient(to right, #ce9063, #f7dcb6);
  font-size: 1.2vw;
  text-align: center;
  color: #69390e;
  position: relative;
  .con{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}