html5設定圖片自適應螢幕寬度

HTML網頁的開發中，需要對大小不一的螢幕相容，使圖片在不同的裝置中可以展示預期的效果。自適應螢幕的寬度，利用css中background屬性可以實現

工具/材料

瀏覽器，文字編輯器

操作方法

新建一個HTML檔案，程式碼如下圖

開啟HTML檔案所在的資料夾，雙擊檔案，跳轉到瀏覽器

改變瀏覽器大小，發現圖片沒有變化，顯示不全

在所在資料夾下，新建一個樣式檔案，命名為 ，程式碼如下

在HTML檔案中加上對樣式檔案的引用，返回資料夾，雙擊HTML檔案，發現瀏覽器的變化會引著圖片一起變化，自適應螢幕的大小