需求：
图片的宽高是不固定的，但是外部盒子是有固定大小的。
图片的宽度和盒子保持一致，并且是水平居中显示，即两边是裁剪的
图片的高度是由盒子宽度控制的，等比例缩放，多余的被裁减掉
原图：
代码：
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<title>Document</title></head><style> ???* { ?????padding: 0; ?????margin: 0; ???} ???.box-img { ?????width: 230px; ?????height: 230px; ?????box-sizing: border-box; ?????border: 1px solid red; ?????overflow: hidden; ?????text-align: center; ?????position: relative; ???} ???img.one { ?????display: inline-block; ?????/*一个图片在一个宽高固定的盒子里，如果只设置图片宽度，那么高度是自适应的。*/ ?????width: 228px; ?????position: absolute; ?????left:0; ?????bottom:0; ???} ???img.two { ?????display: inline-block; ?????width: 228px; ???} ???img.three { ?????max-width: 228px; ?????max-height: 228px; ?????display: inline-block; ???}</style></head><body><!-- 水平方向上的解决方案 --><div class="box-img"> ?<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" ?class="one"></div><div class="box-img"> ?<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" ?class="two"></div><div class="box-img"> ?<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" ?class="three"></div></body></html>效果：
第一种是底部对齐，裁剪顶部
第二种是顶部对齐，裁剪底部
第三种是在固定容器内等比例显示图片