CSS3在手機端圖片設計中有著非常重要的作用，其中，實現圖片自適應的滿屏效果尤為常見。下面我們來看一下如何通過CSS3實現這種效果。

首先，在HTML中需要添加img標簽，同時添加相應的樣式:

<img src="img1.jpg" class="full-screen-img">
.full-screen-img{
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}

接下來，我們可以使用background-image屬性來實現背景圖片的自適應滿屏效果:

<div class="bg-image"></div>
.bg-image{
background-image: url("img2.jpg");
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}

最后，我們還可以使用CSS3的transform屬性來實現圖像的自適應滿屏效果：

<img src="img3.jpg" class="full-screen-img-2">
.full-screen-img-2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
-moz-object-fit: cover;
-webkit-object-fit: cover;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

以上就是三種實現CSS3手機端圖片自適應滿屏效果的方法。如有需要，可以根據實際情況選擇相應的方法，達到理想的效果。