CSS 圖片自適應能夠幫助我們在不同尺寸的屏幕中優雅地展示圖片，以下是一些 CSS 代碼示例。

/* 讓圖片寬度自適應 */
img {
max-width: 100%;
height: auto;
}
/* 在下方插入圖片說明文字 */
figure {
display: flex;
flex-direction: column;
align-items: center;
}
figcaption {
font-size: 14px;
line-height: 1.5;
text-align: center;
color: #999;
margin-top: 10px;
}
/* 處理不同寬高比的圖片 */
.container {
position: relative;
padding-bottom: 75%; /* 比如圖片寬度是 4：3 */
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

以上代碼示例中，第一段代碼使用了max-width: 100%，讓圖片寬度最大只能等于其容器寬度，這樣就可以實現圖片自適應寬度。同時，還使用了height: auto，讓圖片高度與寬度成比例。

第二段代碼包裝了圖片和其說明文字在一個figure元素中，使得我們可以在圖片下方添加文本說明。這里將figure的display屬性設置為flex，這樣圖片和說明文字就可以按照垂直方向堆疊，而不是并排擺放。

第三段代碼示例解決了不同寬高比的圖片的自適應問題。使用一個容器元素來包裝圖片，設置其padding-bottom屬性為圖片寬度與高度的比例，如 4：3 的比例就是75%。接著，設置容器元素的height屬性為 0，這樣容器元素就能夠自適應高度。最后，讓圖片的寬度和高度都為 100%，這樣就可以讓圖片自動填充容器元素。