html内容

<div class='content'><span>我是内容</span></div>

自适应高度
此时内容将无法居中

css">.content { width: 100%; /* 或者其他任意值 */height: 0; padding-top: 100%; /* 与width相等 */
}

居中内容

css">.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;
}