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