ltscript language=quotJavaScriptquot lt！ 圖片按比例縮放 var flag=falsefunction DrawImageImgD var image=new Imagevar iwidth = 180 定義允許圖片寬度 var iheight = 180 定義允許圖片高度 image。

純HTML沒辦法做到自動(dòng)縮放，至于JS我就不清楚了我這邊推薦HTML兩種方法1同時(shí)制作手機(jī)端PC端IPAD端三張背景圖片根據(jù)不同環(huán)境調(diào)用2只做一張圖，利用backgroundimage的backgroundsize屬性來適應(yīng)屏幕，如下代。

html圖片按屏幕大小等比例縮放若瀏覽器允許可按Ctrl+鼠標(biāo)滾輪滑動(dòng)縮放，或用代碼具體方法如下Ctrl+鼠標(biāo)滾輪滑動(dòng)縮放 css代碼與htlm代碼 CSS 代碼如下background position fixedtop 0left 0width 100%heigh。

1新建html文檔，在body標(biāo)簽中添加一張圖片，給這張圖片設(shè)置css屬性，添加“tansform”縮放屬性，屬性值為“scaleXn”，scaleXn指的是對寬度進(jìn)行縮放，n指的是縮放比例2將transform的屬性值改為“scaleYn”。

ltimg src=zhidaogif width=100% height=50% 使用以上代碼插入圖片，就會(huì)按瀏覽器窗口大小縮放也可以使用javascript對圖片大小進(jìn)行改變。

無級(jí)縮放圖片大小 function bbimgo var zoom=parseInt， 10100zoom+=eventwheelDelta12if zoom0 =zoom+#39%#39return false ltSCRIPT 在圖片屬性加上onmousewheel=quot。

這種布局一般都是寫固定寬度和高度的如果真的根據(jù)屏幕大小自動(dòng)縮放圖片，會(huì)更難看的ltstyle*margin0padding0bg_5clearbothwidth630pxheight140pxbg_5 lifloatleftliststylewidth125。

1首先，先在代碼中輸入positionfixed top 0 left 0這樣的作用是讓整個(gè)圖片固定在屏幕上2之后，再把背景圖片的大小自動(dòng)適應(yīng)DIV大小，當(dāng)圖片自動(dòng)適應(yīng)時(shí)，既可以就進(jìn)行縮放3輸入backgroundsize cover。

img display block position absolute top 50% left 50% transform translate3d50%，50%，0 webkittransform translate3d50%，50%，0。

可以通過backgroundsize屬性來設(shè)定背景圖片的大小它可以是像素px或者是百分比%，舉例說明backgroundsize950px*200px這表示把背景圖片大小調(diào)整為寬度950像素，高度200像素1backgroundsize的語法說明1屬性。

2為img標(biāo)簽單獨(dú)設(shè)置“width”或“height”屬性，屬性值為寬度或者高度，這時(shí)圖片的寬度將變成設(shè)置的寬度，高度將會(huì)按原比例進(jìn)行縮放 3同時(shí)為img標(biāo)簽設(shè)置“width”和“height”屬性，這時(shí)圖片的大小將會(huì)完全按照設(shè)置的大小。

css3中新增了一個(gè)屬性 transform scale可以對圖片進(jìn)行放大 縮小 比如transformscale05，表示引用該樣式的內(nèi)容進(jìn)行了縮小了一半，反之，如果括號(hào)里面的值為15那么表示 內(nèi)容放大了15倍做一個(gè)示例演示。

首先你知道寬度的大小吧，比如不同設(shè)備寬度，然后由于圖片外面的div高度是由圖片高度決定的，所以div，可以設(shè)置maxminheight，然而圖片在只設(shè)置width的時(shí)候，height是等比例縮放的。

圖片可以設(shè)置百分比，根據(jù)窗口的大小自動(dòng)縮放，字體不能自動(dòng)縮放除非用@media screen給不同的窗口大小寫不同的字體大小樣式。

要使HTML文本適應(yīng)圖片的大小，可以使用CSS中的`backgroundsize`屬性和`backgroundimage`屬性以下是一個(gè)示例代碼```html ltdiv style=quotbackgroundimage url#39yourimageurl#39 backgroundsize contain width。

一種是JS抓取瀏覽器的resize事件，另外一個(gè)，新單位，低版本瀏覽器不兼容 1vw = 當(dāng)前視圖窗口viewport1%的寬度 1vh = 當(dāng)前視圖窗口viewport1%的高度 1vmin = 1vw 或 1vh， 取決于哪個(gè)更小一點(diǎn) 1vmax = 1vw。