碰到的一个处理了比较久的适配问题，需要适配各种移动端以及pc端

项目网页现在已经完成，对应参考地址： code.fun

在进入该网页时的第一个页面，是需要满屏显示的，在满屏的同时，下面的那张图片需要贴地而且根据屏幕的大小自适应，可以拖动看一看哈。

下面这张图片就是我碰到的最棘手的问题 — （当然哈 我是一个新人，请大家多多包含

一开始我是用了一个标签，只需要定义好父亲节点的大小，img标签给上height:100%或者width:100%,他就可以自动适应且保持原本的比例了，但是问题就来了，

情况一： 当我的宽度很大的时候，我对他进行一个高度的缩小，图片需要根据高度的缩小自动适应宽度的缩小。刚开始我是根据高度来控制img的大小的，没问题，预期的效果达到了。

情况二： 我已经通过设置img的height:100%满足了情况一，但是，当我的高度很高，对宽度进行缩小时，我的需求也是同样的，需要对图片进行原比例的一个缩放。这个问题就开始难到我了。

如果对img同时进行一个height:100%;和width:100%的设置，那么图片就不会按照原比例进行缩放，这样是行不通的。

后来，我的通过控制宽度来控制图片的大小。不知道当时是怎么想的，给高度来了一个 height:80vw（具体忘了，大概就是给了vw属性），想着通过改变一个width 可以同时改变图片的宽高以实现我的原比例缩放。然后在通过media，对不同的尺寸进行一个控制。最后在大的屏幕上竟然可以看到预期的效果。当我以为可以交差时，其实已经部署了，大佬们测试没发现，我在我自己的电脑上发现了。下面那张图片在小屏幕溢出了。

这里的情况有点难讲清楚，不过试过了就有经验了，最后我换了一种方式，终于解决了这个问题

不再使用img了
现在是用一个div来替换img，在给这个div加上
backgroundImage的属性 url(‘xxx.png’) no-repeat center bottom, （不重复，居中，贴底
background-size: contain; （这个是最重要的，保持原始比例

我将上下分为了两个部分，然后给上两个部分的父亲节点弹性布局，竖向排列，然后 justify-content:space-between；完美的让两块贴着顶部和底部，图片的那一块还不需要我去设置高度，只要给好宽度。
没想到我纠结了这么久的问题，最后一个bgImage就可以解决，办法可能还有很多，大家多多吐槽哈，我只想进步