认真理解 图片 <img> background-image

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

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

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