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