background-image 和 img

Posted 2020-08-20 循序渐进，不急不躁

一：解决div里面的img图像宽度不变，高度不变！   超出div部分设置隐藏！

     图片：1920x526 

     div容器： 1423x526   

 1. background-image：样式实现

     img： 标签或者html组建实现

 2.一般来说，如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img

 3.加载过程：如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景                  图片，不会影响你浏览网页内容。 

 4.谨记：background图片的显示：div容器必须设置高度哦！

 

二:background-image属性研究

    

 

 三：引申（你的突破点哦）

 问题1：  当图片的大小超出容器的大小时候，用img标签合适吗？      

 问题2：  img做响应式好还是background-image做响应式好呢？     

 问题3：  css中图片何时会撑破div容器呢？