在移動(dòng)互聯(lián)網(wǎng)時(shí)代，如何讓網(wǎng)頁中的圖片適合手機(jī)屏幕成為了一門必須掌握的技能。CSS是實(shí)現(xiàn)這一目標(biāo)的重要工具之一，下面就介紹一些CSS代碼的應(yīng)用。

/* 圖片自適應(yīng)屏幕 */
img {max-width:100%;height:auto;}
/* 圖片水平居中 */
img {display:block;margin:0 auto;}
/* 圖片邊框和圓角 */
img {border:1px solid #ccc;border-radius:5px;}
/* 圖片陰影 */
img {-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;}
/* 響應(yīng)式圖片媒體查詢 */
@media screen and (max-width: 480px) {
img {max-width: 100%;}
}
/* 圖片居中并拉伸到整個(gè)父容器 */
.parent-box{
display: flex;
justify-content: center;
align-items: center;
}
.parent-box img{
width: 100%;
height: auto;
}

以上代碼可以實(shí)現(xiàn)圖片自適應(yīng)屏幕、圖片水平居中、圖片邊框和圓角、圖片陰影等效果，更好地滿足了移動(dòng)設(shè)備用戶的需求。此外，可以通過響應(yīng)式圖片媒體查詢的方式，根據(jù)不同屏幕大小，調(diào)整圖片大小。如果需要圖片居中，并拉伸到整個(gè)父容器，可以使用Flex布局。

總的來說，CSS代碼可以實(shí)現(xiàn)對圖片在移動(dòng)設(shè)備上的適應(yīng)，提高網(wǎng)頁的用戶體驗(yàn)。