當前位置:趣味科普網>經驗>

css如何設定圖片大小自適應

經驗 閱讀(1.92W)

css如何設定圖片大小自適應

在前端的頁面設計的時候經常要用到圖片,有的時候不知道螢幕的寬度,要自己適應螢幕的寬度,這樣減少了出現不適應的瀏覽器的相容問題那麼怎麼來處理圖片大小自適應的問題呢?

首先用dw編輯器建立了一個靜態頁面

將建好的靜態頁命名為css.html,標題為了“css如何設定圖片大小自適應”

在body中新增兩個div,設定不能的寬度,並設class為div1和div2,目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示

在兩個div的class中新增相同的控制圖片的class名為了”img“,併為div新增控制寬度的樣式

在兩個div中加入相同的圖片&imgsrc="images/5.png"/>;在瀏覽器開啟頁面發現加入圖片後把原來的div都給覆蓋掉了

這個時候我們需要在img類中加入限制圖片的寬度的css語句讓他自己適應容器的寬度mg{width:100%;height:auto}