认真理解 图片 background-image

　　　　　　　　　　      <img src="" width="" height="" alt=""> 

一：图片的宽度和高度的关系？

    1.宽度设置，高度会自行按原比例调整！
    2.高度设置，不设置宽度，那么宽度也会按图片原比例调整哦。
    3.强行同时设置图片的高和宽，会致使图片失真哦，图片的宽高比例变化了。  除非你设置比例同样。
    4.height:auto,顾名思义就是至关于不设置height属性，height会根据宽高比例肯定。
    5.只设置width：100%，height自行调整。
    6.只设置height：100%； 图片按默认大小显示。 由于div的高度不肯定！    
 
     总结：宽度和高度，二者有一个肯定，另外一个会按照图片默认的宽高比例调整本身的另外一属性。

二：现象 
   
    1.图片的内部样式会覆盖图片的内联样式哦，  height  width
    2.图片的max-width之类的只是给图片设置一个阈值。 不是设置具体大小哦，因此不会覆盖其内联样式。
　　 3.图片不设置高度和宽度，天然就会按照本身的默认大小显示。

三：响应式
  
   1.设置图片的max-width：100%（相对于图片的默认宽度），height：auto（默认的哦）； 而后图片怎么缩放都会不大于本身的默认宽度。
     从而不会失真！  设置width：会使得图片失真哦！  
     max-width的参照物是图片自己的哦！  和width:100% 的参照物不一样（容器）。
   2.实现的效果： 图片会随着容器大小的变化而发生变化。   图片的可缩可放：width：100%。  
                                                 图片只缩不放：max-width：100%；

   总结：响应式图片的思路就是宽高参照容器大小。  

四：疑问？

1.设置内联的宽高，而后再设置外联的宽高？  这是啥意思啊？        内联的宽高：图片自己的大小。
2.设置图片容器的高度，而后图片继承（height：100%）  直接将高度写在img标签的区别是什么呢？     没区别吧！ 



 background-image
一：再次巩固一番
 1.设置背景图，那么容器必定要有高度哦，否则确定无法显示。 
 2.backgorund-size:contain 按照图片的默认大小来显示。
 background-size:cover 100%填充容器。 图片的宽高比例也是不变的哦，显示不下的会被隐藏。
 background-size:100% 效果和cover的同样哦（同上） background-size:100% 100% 背景图完整覆盖容器，但宽高比例变了，图片变形。 background-posiiton: left/center/right top/center/bottom 二：背景图响应式 1.媒体查询，根据设置分辨率加载相应大小的图片哦。 节省带宽。