H5图片显示方式解决方案（图片不变形显示、图片裁剪、自适应）

开发过程中经常会遇到如下图的需求，将商品图片或者其他图片变成一组正方形显示，但往往我们拿到的图片并不是正方形的，如下图：

问题图片

我们看看原图，很明显能看到图片受到了挤压、变形：

原图

这并不是我们想要的效果，那么今天就来说说解决方案，让图片不压缩，无论图片是高要长一些，还是宽要长一些都能显示出图片核心部分的内容。最终效果如下（无论是高度还是宽度超出都没有再进行压缩）：

最终效果图

思路：

        方案一：当图片高度大于宽度时，将宽度设置为100%，超出的高度隐藏并垂直居中。

        方案二：当图片宽度大于高度时，将高度设置为100%，超出的宽度隐藏并水平居中。

代码实现：（以下代码基于Vue）

        一、首先获取图片的宽高，判断需要执行哪个方案，并将结果保存。

绑定

获取元素高宽哪个更长的结果

        二、根据结果绑定不同样式。

绑定样式

        三、编写样式。

编写好的样式

        样式这里说一下，拿class 'heightLong' 举例，当图片长度比宽度值大的时候，宽度100%长度溢出后隐藏。超出的部分自然从父元素的底部溢出。top: 50%;是父元素一半的高度，transform: translateY(50%);是图片一半的高度，这两个值的差就是（ （图片高度 - 父元素高度）/ 2 ，也就整好是图片垂直居中显示顶部或底部多出来的距离）。同理可得 class 'widthLong'。

/*        后续更新        */

    CSS3 新属性   object-fit

    图片宽高设为100%；添加 object-fit:cover; （此方法图片两边的长度都超过父元素宽高才停止扩展，也就是图片短边达到父元素边缘才停止）

/*        后续更新        */

注：有什么疑问可在评论区留言，看见了一定会回复！有不对的地方也欢迎指出，大家一起学习交流！