隨著移動設備的普及，越來越多的人通過手機或平板電腦來瀏覽網頁。因此，如何使網頁中的圖片適應不同大小的移動設備成為了一個重要的問題。下面我們來看看如何使用HTML代碼來實現這個功能。

<img src="example.jpg" alt="example">

以上是一個簡單的HTML代碼，將一張名為example.jpg的圖片插入到HTML文檔中。但是當我們將這個網頁打開到手機上時，圖片可能會顯得非常大或者太小。那么我們該如何設置圖片尺寸呢？

第一種方式是通過CSS來設置圖片的寬度和高度。我們可以設置一些CSS樣式，例如：

img {
max-width: 100%;
height: auto;
}

這個CSS樣式的意思是設置圖片的最大寬度為100%，高度自動適應比例縮放。這樣，圖片在不同設備上的顯示效果均勻，不會有太大的變形。

第二種方式是使用響應式圖片。響應式圖片會自動根據不同屏幕大小和分辨率加載不同的圖片。例如：

<img src="example.jpg" srcset="example-large.jpg 1000w, example-medium.jpg 600w, example-small.jpg 400w" alt="example">

這個HTML代碼中，我們在img標簽中添加了一個srcset屬性，用來設定不同分辨率下的圖片鏈接和對應的屏幕寬度。這樣，當頁面打開到不同設備上時，瀏覽器會根據屏幕寬度來加載適合的圖片，從而達到更好的圖片顯示效果。

總之，通過以上兩種方式的設置，我們可以很好地實現圖片在不同設備上的適配。這不僅可以提高網頁的加載速度，也可以提升用戶體驗。希望這篇文章可以幫助到大家。