需求：后端返回了一组图片，图片的宽度固定，高度不固定。前端要求图片展示为正方形，图片不能变形且自适应，如果图片高了则裁剪掉。
<div><div class="img-wrap"><img src="a.jpg"></div></div>// css.img-wrap {position: relative;width: 100%;height: 0;padding-bottom: 100%;overflow: hidden;}.img-wrap img {position: absolute;width: 100%;}
原理解析：img-wrap继承父元素的宽度，为了保证img-wrap容器的高度等于宽度，通过padding-bottom撑开高度，接下来图片只设置宽度让它等于父元素的宽度，图片的高度会自适应。父元素设置overflow:hidden，这样设置以后图片即使过高也能保证不变形，只是看起来像裁剪成了正方形。
