img大小和background-size

img

不設置img標籤的width和height，將顯示圖片真實大小
只設置width或height，另外一個將按比例自動縮放
設置了width和height，將按設置的大小來顯示

img圖片自適應（bootstrap響應式圖像的寫法）
img{
display:block;
max-width:100%;
height:auto;
}
把元素的 display 屬性設置爲 block，以塊級元素顯示，由於img是行內元素設置不了width和height
設置 height:auto，相關元素的高度取決於瀏覽器
auto是默認的值，通常無需設置此值，不設置即寬度默認爲auto（自適應 自動），隨內容增長而增寬，隨瀏覽器寬度而換行，
通常狀況下，若是是自動寬度是沒有必要設置的，直接去掉簡單而又節約代碼，同時和設置值爲auto同樣效果
width設置的是內容塊級元素內容的寬度，假設父級元素是body則width:100%後塊級元素就和父級元素同樣寬（固然還要考慮默認的margin），設置margin-left後會出現橫向滾動條，不設置width或者width:auto，則不會有滾動條

設置 max-width 爲 100% 會重寫任何經過 width 屬性指定的寬度
百分比是以父元素爲標準的，因此首先其父元素要有寬高，寬度通常不設置會有默認值(auto)，可是高度不設置就沒有默認值，所以若是父元素沒設高度值，而其內部元素用了百分比做爲高度時，是沒有效果的

若是設置了div的寬高，而裏面的img不設置，若img過大，會超出div

裏面img設置width:100%，則img寬度和div同樣，但img特性是自動等比縮放

解決辦法是父div不設置高度，讓img將其撐起

margin的百分比也是以父元素爲基準的

有時使用margin-left時會出現圖片變小的狀況，由於灰框div不設置寬高，就會和黑框div的width同樣寬，img又設置了width:100%，當灰框div的margin-left愈來愈大時，它本身就愈來愈小，而img用了百分比，就隨着灰框這個父div一塊兒變小

background-size

background-size: length（px）|percentage（%）|cover|contain;
cover會按原長寬比縮放背景圖來鋪滿整個元素，超出的會被裁掉

contain也是按原長寬比縮放背景圖，會顯示完整的圖片