在現代網站設計中，圖片是不可或缺的元素之一。然而，不同的設備和分辨率會導致同一張圖片在不同的情況下顯示效果不同。為了使圖片能夠自適應不同的設備和分辨率，我們需要使用一些技巧。 首先，我們可以使用CSS中的max-width屬性來限制圖片的最大寬度。這樣，當屏幕尺寸變小時，圖片的大小也會相應地縮小，避免了圖片在小屏幕上變得過大。 下面是一個示例代碼：

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

在這個示例中，我們將圖片的最大寬度設為100%。這意味著圖片的寬度不能超過其父元素的寬度。同時，我們將圖片的高度設為auto，讓圖片可以根據自身比例進行自適應。 另外，我們還可以使用媒體查詢來為不同的屏幕尺寸設置不同的圖片大小。例如，我們可以為小屏幕設備設置一個較小的圖片，以提高頁面加載速度。下面是一個示例代碼：

/* 小屏幕設備 */
@media screen and (max-width:500px){
img{
width:50%;
height:auto;
}
}
/* 大屏幕設備 */
@media screen and (min-width:501px){
img{
width:100%;
height:auto;
}
}

在這個示例中，我們使用媒體查詢為小屏幕設備設置了一個寬度為50%的圖片，而為大屏幕設備設置了一個寬度為100%的圖片。 總之，我們可以通過CSS中的max-width屬性和媒體查詢來實現圖片大小的自適應，從而提高頁面的用戶體驗和加載速度。