當前位置:妙知谷 >

遊戲數碼 >IT技術 >

html5設置圖片自適應屏幕寬度

html5設置圖片自適應屏幕寬度

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

工具/材料

瀏覽器,文本編輯器

操作方法

新建一個HTML文件,代碼如下圖

html5設置圖片自適應屏幕寬度

打開HTML文件所在的文件夾,雙擊文件,跳轉到瀏覽器

html5設置圖片自適應屏幕寬度 第2張

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

html5設置圖片自適應屏幕寬度 第3張

在所在文件夾下,新建一個樣式文件,命名為 ,代碼如下

html5設置圖片自適應屏幕寬度 第4張
html5設置圖片自適應屏幕寬度 第5張

在HTML文件中加上對樣式文件的引用,返回文件夾,雙擊HTML文件,發現瀏覽器的變化會引着圖片一起變化,自適應屏幕的大小

html5設置圖片自適應屏幕寬度 第6張
html5設置圖片自適應屏幕寬度 第7張
標籤: HTML5 屏幕 設置
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/zg84l.html