认真理解 图片 <img> 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.媒体查询，根据设置分辨率加载相应大小的图片哦。   节省带宽。   

转载于:https://www.cnblogs.com/njqa/p/6207954.html