css 动态宽度的同时高度自适应（含内容居中）
html内容
<div class='content'><span>我是内容</span></div>
自适应高度
此时内容将无法居中
.content {
width: 100%; /* 或者其他任意值 */
height: 0;
padding-top: 100%; /* 与width相等 */
}
居中内容
.content {
width: 100%; /* 或者其他任意值 */
height: 0;
padding-top: 100%; /* 与width相等 */
position: relative;
}
.content span {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
height: 50%; width: 50%; margin: auto;
/* 此时span已经相对于content居中，如果想要span的内容再居中，则补充如下样式：↓ */
display: flex; align-items: center; justify-content: center;
}