1. 首頁 > 生活百科 > >

css如何設置圖片大小自適應 css讓圖片自適應屏幕大小

生活百科自適應


css如何設置圖片大小自適應 css讓圖片自適應屏幕大小

文章插圖

在前端的頁面設計的時候經常要用到圖片 ， 有的時候不知道屏幕的寬度 ， 要自己適應屏幕的寬度 ， 這樣減少了出現不適應的瀏覽器的兼容問題那么怎么來處理圖片大小自適應的問題呢？
首先用dw編輯器建立了一個靜態頁面
將建好的靜態頁命名為css.html ， 標題為了“css如何設置圖片大小自適應”
【css如何設置圖片大小自適應 css讓圖片自適應屏幕大小】在body中添加兩個p ， 設置不能的寬度 ， 并設class為p1和p2 ， 目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示
在兩個p的class中添加相同的控制圖片的class名為了”img“ ， 并為p添加控制寬度的樣式
在兩個p中加入相同的圖片&imgsrc=http://www.ljsggw.cn/qita/"images/5.png"/>；在瀏覽器打開頁面發現加入圖片后把原來的p都給覆蓋掉了
這個時候我們需要在img類中加入限制圖片的寬度的css語句讓他自己適應容器的寬度.imgimg{width:100%;height:auto}

    推薦閱讀