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