兼容性问题---- 图片下方有大片空白

1. 问题
   在谷歌, 火狐浏览器下无论是不同屏幕大小还是手机模式下都是完美的的, 然鹅, 事情并不简单,在 edge 下出现高度过高, 图片只占了上边一小部分, 下方有大片空白 的问题

2. 查找原因
   刚开始以为是 padding, margin 的原因, 但找了一圈下来, 还是自己太单纯, 最后锁定 高度原因

3. 解决问题
   将 height: 100%; 改为了 height: auto;
   问题成功解决了
   一个问题的解决并不意味着结束, 在手机上访问时依然是 有大片空白, 发现原来还有 height: 100%;
   改正之后就解决了

4.最最最重要的
原理是啥啊, 还是不太明白, 为啥要这么改呢？？？？？？？