按照width:100%设置图片正方形

• 问题简述
  当列表图片大小不一致会导致布局不美观的情况下，设置图片为正方形
  

• 尝试过的方法
  1、设置width:100%;height:100%;
  height:100%;不生效，按照width:100%对图片进行缩放
  2、固定width:10px;height:100px;
  对不同设备设配效果不理想
  3、获取设备屏幕大小，js动态设置图片大小
  该过程繁琐，在此处没有必要

• 最后解决办法
  给图片外面套一层div

  .image{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; //调整图片比例
  margin-bottom: 5%;
  }
  .image img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  }

本篇博客旨在记录了自己在前端编程过程中碰到的一部分问题，如有错误的地方欢迎指正