HTML怎樣讓圖片自適應代碼 在網頁設計中，圖片是不可或缺的一部分。通常，我們會給圖片一個固定的寬度和高度值，但是這種方式并不靈活。當我們在不同的設備上瀏覽網頁時，圖片的尺寸和比例會發生變化。下面將介紹一些可以讓圖片自適應的HTML代碼。 一、使用max-width和height屬性 使用max-width和height屬性可以讓圖片按比例縮小，適應網頁布局。例如：

<img src="image.jpg" alt="Example" style="max-width:100%; height:auto;" />

這個代碼段將圖片的最大寬度設置為整個父元素的寬度，高度將按比例縮放。 二、使用CSS背景圖像 在CSS中，我們可以使用background-image屬性來添加背景圖像。

<style>
.image {
width:100%;
height:100%;
background-image:url(image.jpg);
background-size:cover;
background-position:center;
}
</style>
<div class="image"></div>

上面的代碼將圖片作為背景圖像添加到一個div元素中。背景大小設置為cover，可保持圖片的長寬比例，并填充父元素。背景位置設置為中心，可使圖片在元素的中央。 三、使用響應式圖像 響應式圖像可以根據設備的尺寸和分辨率來動態修改圖片的大小和質量。例如：

<picture>
<source media="(min-width: 640px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="example">
</picture>

在這個代碼段中，我們使用picture元素來包含多個圖片，根據設備的分辨率和尺寸來位置最適合的圖片。根據上述代碼，大于640px的設備使用large.jpg，大于400px，小于640px的設備使用medium.jpg，小于400px的設備使用small.jpg。 總結 以上三種HTML代碼，可以幫助您將圖片動態地適應不同的屏幕大小和分辨率，讓您的網頁設計更具靈活性。