使用CSS可以讓圖片適應不同屏幕的大小，下面介紹幾種方法：

/* 示例圖片 */
img {
max-width: 100%;
height: auto;
}

方法一：使用max-width屬性

可以設置圖片的最大寬度為100%（指相對于父元素的寬度），高度自動適應。這樣就可以讓圖片隨著屏幕大小自適應縮放。

/* 示例圖片 */
.img-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9比例 */
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

方法二：使用padding-bottom屬性

可以根據圖片的比例設置父元素的padding-bottom屬性值，使其成為一個占位的方形容器，然后使用絕對定位設置圖片的大小及位置。這樣也可以讓圖片自適應屏幕大小。

/* 示例圖片 */
.img-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
max-height: 100%; /* 根據需要設置最大高度 */
}

方法三：使用flex布局

將圖片放在一個flex布局容器里，使用align-items和justify-content屬性使其在容器內居中對齊，并設置圖片的最大寬度和高度為100%。這樣也可以讓圖片適應不同屏幕大小。