背景图片自动适应外层盒子
开发工具与关键技术：DW解决背景图片
作者：周欢
撰写时间：2019/1/18
一个布局竟能拉低一个网页的整体水平，之前毛无意识的我在这个坑上栽了跟头。我还深刻记得那一句：“整体效果不佳，页面混乱，图片的处理不过关”，其实就是上期所提到的分辨率考虑不到位，还有这期的图片处理不合理两大问题所导致的。不过没事，有问题才有进步将我们院长大人的一句话送给大家：“不要因问题而苦恼，要善于发现问题、解决问题，问题将会是你一笔宝贵的财富”
好了，来让我们看看是怎么个情况，想把自己喜欢的图片放进网页中为毛总是被各种的扭曲
这是自己喜欢的原图
代码1：
代码2：
代码1和代码2结合所实现的效果：
和原图比较，我们可以明显看出图片只被浏览器显示了一部分，这样和我们本身想要的效果完全不一样，那简直是天壤之别，那么我们该如何解决这一问题点❓❓❓
以下是我在在坑之后，自己总结的方法：
第一：使用background-size属性
给div添加background-size：cover；样式
代码示意：
效果截图：
第二：使用img标签
在原有的div增加个img标签，然后让img标签的宽度（width）和高度（height）与div的宽度高度保持一致（记得若在同一div中显示，应先注释第一，在看第二效果）
代码示意：
代码3：
代码4：
代码3结合代码4实现的效果：
然后添加点其他小样式，也可以实现的不错的效果，分享一下自己添加一些小样式后的图片
小小建议：
1、 图片的缩放要得当，不然显示效果会让人很别扭
2、 布局尽肯能给用户一种自然舒适感
3、 在之后做项目、产品时，要多多从用户的角度出发，深入了解用户的需求，从而达到用户想要的效果