首先，簡單解答如何使圖片自適應可以通過給 img 圖片所在的 div 設置相對定位，并添加樣式 `width 100% height auto` 或 `maxwidth 100% height auto`這樣做可以讓圖片根據(jù)容器的大小自動調(diào)整其寬度，并保持長寬比不變，避免變形接下來，深入思考實現(xiàn)圖片自適應的其他技巧可以使用；1首先在編輯器建立了一個靜態(tài)頁面，在body中添加兩個div，設置寬度，并設class 為div1和div2，在兩個div的class 中添加相同的控制圖片的class名為了 ”img“，并為div添加控制寬度的樣式2在兩個div中加入相同的圖片， 這個時候需要在img 類中加入css語句設置一下div的高度和寬度，以及div的；首先你知道寬度的大小吧，比如不同設備寬度，然后由于圖片外面的div高度是由圖片高度決定的，所以div，可以設置maxminheight，然而圖片在只設置width的時候，height是等比例縮放的。

圖片自適應屏幕瀏覽器的方法有兩種形式第一種也是最方便的把圖片設置成百分比，用百分比來控制，比如你的格局，在div中，分兩個區(qū)域每個區(qū)域有50%大小，占用整個屏幕的大小，然后你在一個div中的圖片設置100%，他只是占了整個屏幕的50%的，如果設置50%，那么他占用的是25%，根據(jù)上一級的區(qū)域來；制作css手機版頁面時如何使背景圖片適應div的高度和寬度 具體步驟如下1輸入位置固定top0左0將整個div固定在屏幕的頂部和左側2輸入寬度100%身高100%最小寬度1000像素這個可以適合div的高度和寬度，而minwidth是在屏幕寬度在1000px以內(nèi)的情況下，保持div的大小不變3輸入。

ltdiv style=quotfloatleftquot這是左邊DIV內(nèi)容，可自動大小ltdiv ltdiv style=quotfloatleft widthauto heightautoquotltimg src=quot1jpgquot width=quot200quot height=quot200quot ltdiv ltdiv style=quotfloatleftquot這是右邊DIV內(nèi)容，可自動大小ltdiv 提示如果頁面寬度固定掉的話，那就會自動下來；四種方法1增加一個清除浮動，讓父容器知道高度2增加一個容器，在代碼中存在，但在視覺中不可見3增加一個BR并設置樣式為clearboth4設置一個足夠高的高度，并在父級元素中清除溢出的部分；當屏幕寬度小于768px手機時，將圖片換為小圖，并在div里生成img標簽，img的寬高隨窗口變化而變化，包裹img的div也隨之變化 1打開代碼編輯器1html代碼的編寫3css代碼的編寫4js的代碼編寫5在移動端手指觸摸輪播圖切換效果代碼的編寫6也可以使用bootstrap框架直接引入css文件；需要準備的材料分別有電腦瀏覽器html編輯器1首先，打開html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltstyle標簽中，輸入css代碼body background urlimage123jpg norepeat backgroundsize cover3瀏覽器運行indexhtml頁面，此時圖片既沒有變形就能完整；2將建好的靜態(tài)頁命名為csshtml，標題為了“css如何設置圖片大小自適應”3在body中添加兩個div，設置不能的寬度，并設class為div1和div2，目的是用一樣的css控制圖片的寬度在不同的寬度容器中都能很好的顯示 4在兩個div的class中添加相同的控制圖片的class名為了”img“，并為div添加控制寬度的；值得注意的是，雖然overflow scroll能夠解決大多數(shù)情況下自適應高度DIV的問題，但在某些特定情況下，你可能需要考慮其他因素，如頁面響應式設計在這種情況下，你可能需要結合其他CSS屬性，如maxheight和minheight，以確保DIV在不同設備和屏幕尺寸下都能正常顯示總之，使用overflow scroll屬性為DIV；1HTML的div標簽主要是用來布局，div默認是沒有任何屬性的這也是常用它布局的原因2主要設置兩個div，一個div在外一個div在內(nèi)，并設置div的邊框顏色3首先打開頁面，具體如下圖所示4F12打開審查元素，修改內(nèi)層div的寬度，外層div隨著邊框5修改內(nèi)層div高度，外層div高度隨之改變6div。

使html中div內(nèi)的圖片隨屏幕大小調(diào)節(jié)的操作方法為，將div與img的寬度都設置為100%，代碼如下lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quot lthtml xmlns=quot ltheadltmeta；怎樣讓一個div高度自適應瀏覽器高度這個方法就大致分為兩種吧，第一種，用CSS的方法 第二種，用JS方法 這里暫時只演示第一種，如果第二種，另外@我 示例代碼如下CSS代碼第一種寫法 html，bodyheight100%margin0**把HTML和BODY的高度設置成100%** divheight100%backgroundcolor#；圖片自適應屏幕大小顯示主要是利用百分比來控制，切忌給圖片寬度一個固定值如下代碼html代碼pimg src=quot圖片地址quotalt=quotquotp此時的css可以寫成imgboximgwidth100%這樣，圖片的大小就會根據(jù)其父級容器的大小而變化，圖片的寬度只設置百分比，這樣可以根據(jù)瀏覽器窗口的大小變化而隨時調(diào)整。