响应式更改div大小，保持长宽比

响应式更改div大小，保持长宽比

您可以使用纯CSS来完成；无需Javascript。这利用了

padding-top

百分比（相对于包含块的
width）的（有点违反直觉）事实。这是一个例子：

.wrapper {  width: 50%;    display: inline-block;  position: relative;}.wrapper:after {  padding-top: 56.25%;    display: block;  content: '';}.main {  position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;    background-color: deepskyblue;    color: white;}<div >  <div >    This is your div with the specified aspect ratio.  </div></div>