1、首先用dw編輯器建立了一個靜態頁面
2、將建好的靜態頁命名為css.html,標題為了“css如何設置圖片大小自適應”
3、在body中添加兩個div,設置不能的寬度,并設class 為div1和div2,目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示
4、在兩個div的class 中添加相同的控制圖片的class名為了 ”img“,并為div添加控制寬度的樣式
5、在兩個div中加入相同的圖片,在瀏覽器打開頁面發現加入圖片后把原來的div都給覆蓋掉了
6、這個時候我們需要在img 類中加入限制圖片的寬度的css語句讓他自己適應容器的寬度.img img{ width:100%; height:auto}