本文主要介紹Html如何控制圖片大小，由於Html引入圖片的方式有兩種，所以本文主要分兩個模組進行舉例講解：1透過<img>標籤引入圖片，2透過css樣式引入圖片。
1、新建一個資料夾example，在資料夾下準備以下四個檔案，其中Penguins.jpg圖片的原始尺寸為1024*768
2、img_img.html及div_img.html的內容分別如下圖所示
1、<img>標籤引入的圖片可以直接在style中設定圖片的大小<img src="Penguins.jpg"/>注意：設定圖片寬度時註釋影象寬高比，比例與原圖不同時圖片會變形。
1、透過css引入的圖片，可以透過background-szie屬性調整圖片大小，background-size的語法如下，可以透過length,percentage,cover及contain四個之中的任一個來調整整改尺寸。
2、將length設定為500px auto；同時新增background-repeat屬性，其值為no-repeat，顯示效果如下圖所示注意：如果不加background-repeat：no-repeat屬性，則影象會重複顯示。
3、將percentage設定為50% auto，顯示效果如下圖所示注意：高度設定為auto後，圖片會根據具體寬度等比例調整高度，圖片不會變形。
本文主要介紹Html如何控制圖片大小，由於Html引入圖片的方式有兩種，所以本文主要分兩個模組進行舉例講解：1透過<img>標籤引入圖片，2透過css樣式引入圖片。
一、準備工作1、新建一個資料夾example，在資料夾下準備以下四個檔案，其中Penguins.jpg圖片的原始尺寸為1024*768
2、img_img.html及div_img.html的內容分別如下圖所示
二、透過標籤引入圖片1、<img>標籤引入的圖片可以直接在style中設定圖片的大小<img src="Penguins.jpg"/>注意：設定圖片寬度時註釋影象寬高比，比例與原圖不同時圖片會變形。
三、透過css樣式引入背景圖片1、透過css引入的圖片，可以透過background-szie屬性調整圖片大小，background-size的語法如下，可以透過length,percentage,cover及contain四個之中的任一個來調整整改尺寸。
2、將length設定為500px auto；同時新增background-repeat屬性，其值為no-repeat，顯示效果如下圖所示注意：如果不加background-repeat：no-repeat屬性，則影象會重複顯示。
3、將percentage設定為50% auto，顯示效果如下圖所示注意：高度設定為auto後，圖片會根據具體寬度等比例調整高度，圖片不會變形。