一张正方形图片，伴随我一年半，敢问情绪的使用方法

Posted 2020-10-02 怪诞咖啡

【问题的由来】

1. 图片适配正方形显示方法一

   <style>
   .box{width:400px;height:400px;border:solid 5px red;margin:0 auto;background:#f4f4f4 url() no-repeat center;background-size:cover;}
   </style>
   <div class="box" style="background-image:url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg);"></div>

2. 图片适配正方形显示方法二

   <style>
   .box2{width:400px;height:400px;border:solid 5px red;margin:0 auto;}
   </style>
   <div class="box2" style="background:#f4f4f4 url(http://data.upfitapp.com/data/2017/08/12/1722315025297765877.jpg) no-repeat center;background-size:cover;"></div>

【说明】

方法二是我这一年半以来一直使用的方法，没错每次需要适配图片的时候，我都要在每个div上写上一遍；

直到刚刚，我刚刚因为移动端回车按键脸红，还没有消退，有爆发了一个无比搞笑的事情

【为什么】

为什么，我这么长时间，一直使用方法二，而不是方法一呢？看明白的同学，都知道，两种方法对比，方法一和方法二差好几个量级；

而我却用了一年半，回溯曾经探索不同尺寸的图片要显示在正方形里面，我走过了很多个路口：

1. 最开始想各种办法在img标签上下功夫，但是发现在不知道图片宽高数据，还要适配各种奇形怪状的尺寸，这种方法的实现难度过大，需要进行大量的JS操作，在开发上、性能上和后期维护都是不可取的
2. 当时项目催的很急，我的水平也一般般，情急之下，在网上找了N多的插件，最后选择了一个可以裁剪的插件，在图片的源头进行限制，加上img标签就可以了；问题是别人的插件在使用过程中性能问题和一些定制化方便实在是让我烦不胜烦；我现在基本上都是自己写需要的插件，不在做伸手党，伸手党的苦，源自与那种无奈的折磨
3. 自己当时正在研究CSS3性特性，发现了background-size这个样式加上background的其他样式就可以各种比例的图片显示成为正方形；而后我希望能够用background把background-size也包含就去，这样代码量会少很多；而正是这种方法的失败，导致了后续被自己坑了一年半；当时的想法是全部用background简写，没有找到合适的规则写法，而且研究的时候，资料也说过尽量不要用background包含全部；浏览器解析起来比较麻烦，也影响性能
4. 图片地址来源于后台数据请求，所以肯定不能下载CSS里面，都一样怎么玩耍；所以需要写在html标签里面，我试验了很多次，发现使用方法一种的写法，就必须把background-size一起写在里面，不然size样式不生效；当时很苦恼，但却只能这样；知道今天

【茅塞顿开】

类似简写方法，其实有很多样式都有，比如：padding、margin等，由于background包括background-size，而background-size的默认值auto，导致了其失效；

情绪的力量，每次开发到这块，自己都由些许情绪，仔细了解才知道，为了一个图片地址，我要写那么多重复的代码，而我还乐此不疲的不去深入思考为什么；

管理情绪，情绪给我们的最大帮助就是发现问题，而我们不应该不知所措，自乱阵脚；而应该去接触和了解它，知道这是不是一个问题，是问题，如何解决呢？及时没有立刻解决也要在大脑中留个疑问；

灵感的来源就是自己大脑中有多少个为什么，为什么越多灵感也就越多；