保持固定长宽比

利用vm与vh

  1. .about {
  2.     width: 64%;
  3.     height: 36vw;
  4.     border-style: solid;
  5.     border-color: red;
  6. }

vw表示可视宽度的1%
vh表示可视高度的1%
vmin表示两者间的较小者,vmax表示两者间的较大者
浏览器兼容性不够好

垂直方向的padding撑开容器

  1. .about{  
  2.     width:64%;  
  3.     height:0;  
  4.     padding-bottom: 56.25%;  
  5.     border-style: solid;
  6.     border-color: red;
  7. }

padding和margin百分比是以父元素的宽度为准,因此将子元素用padding撑开即可
会导致在元素的max-width失效

伪元素的padding-top撑开容器

  1. .about {
  2.     width: 64%;
  3.     border-style: solid;
  4.     border-color: red;
  5.     max-width: 200px;
  6. }
  7. .about:after {
  8.     content: '';
  9.     display: block;
  10.     padding-top: 56.25%;
  11. }