認真理解 圖片 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.媒體查詢，根據設置分辨率加載相應大小的圖片哦。 節省帶寬。