CSS的樣式設(shè)計(jì)經(jīng)常會(huì)遇到這樣一種情況，就是在圖片下方存在較多的空白，并且不夠美觀，如何解決這一問題呢？

.img-box {
display: flex;
align-items: flex-end;
width: 100%;
}
.img {
width: 100%;
height: auto;
object-fit: cover;
}

解決方法就是給包裹圖片的容器設(shè)置為flex布局，并將對齊方式設(shè)置為底部對齊，然后對圖片使用object-fit: cover屬性，使得圖片在容器中完全填充，并自動(dòng)適應(yīng)容器的大小。

而如果需要在圖片下方添加描述文字，我們可以在圖片容器的下方再加上一個(gè)div元素，用于顯示文字，然后設(shè)置文字容器與圖片容器的對齊方式為頂部對齊即可。代碼如下：

.img-box {
display: flex;
align-items: flex-end;
width: 100%;
}
.img-box .text {
width: 100%;
display: flex;
align-items: flex-start;
}
.img {
width: 100%;
height: auto;
object-fit: cover;
}

這樣就能實(shí)現(xiàn)在圖片下方添加文字描述并合理利用空間，使得整體界面更美觀。