图片容器宽高比设置的优化方案

div {  

    width: 100%; 

    position: relative; // 使用相对定位 

    height: 0; // 高度设置为0，使用padding来设置高度 

    overflow: hidden; 

    padding-bottom: 80%; // 使用padding-top也可，使用padding来撑高容器，高度为宽度80%

}

div img { 

     position: absolute; // 使用绝对定位 

     width: 100%; // 宽高为容器的宽高 

     height: 100%; 

     top: 0; 

     left: 0

}

优点：当图片加载不出来的时候，容器的位置不会消失；不需要使用js就能解决图片比例控制问题。