开发过程中经常会遇到如下图的需求，将商品图片或者其他图片变成一组正方形显示，但往往我们拿到的图片并不是正方形的，如下图：
我们看看原图，很明显能看到图片受到了挤压、变形：
这并不是我们想要的效果，那么今天就来说说解决方案，让图片不压缩，无论图片是高要长一些，还是宽要长一些都能显示出图片核心部分的内容。最终效果如下（无论是高度还是宽度超出都没有再进行压缩）：
思路：
方案一：当图片高度大于宽度时，将宽度设置为100%，超出的高度隐藏并垂直居中。
方案二：当图片宽度大于高度时，将高度设置为100%，超出的宽度隐藏并水平居中。
代码实现：（以下代码基于Vue）
一、首先获取图片的宽高，判断需要执行哪个方案，并将结果保存。
二、根据结果绑定不同样式。
三、编写样式。
样式这里说一下，拿class 'heightLong' 举例，当图片长度比宽度值大的时候，宽度100%长度溢出后隐藏。超出的部分自然从父元素的底部溢出。top: 50%;是父元素一半的高度，transform: translateY(50%);是图片一半的高度，这两个值的差就是（ （图片高度 - 父元素高度）/ 2 ，也就整好是图片垂直居中显示顶部或底部多出来的距离）。同理可得 class 'widthLong'。
/* 后续更新 */
CSS3 新属性 object-fit
图片宽高设为100%；添加 object-fit:cover; （此方法图片两边的长度都超过父元素宽高才停止扩展，也就是图片短边达到父元素边缘才停止）
/* 后续更新 */
注：有什么疑问可在评论区留言，看见了一定会回复！有不对的地方也欢迎指出，大家一起学习交流！
