在網頁設計領域中，我們經常需要在網頁上添加各種圖片，這些圖片的位置和大小都要進行適當的調整才能更好地展現網頁的美感。這時候，我們就需要使用CSS來控制圖片在盒子上的位置和大小。具體的方法如下：

.box{
position: relative;
width: 300px;
height: 300px;
background-color: #eee;
}
.box img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}

首先，我們定義了一個盒子.box，設置它的寬度和高度都是300px，背景顏色為#eee。為了控制圖片在盒子中的位置，我們需要為盒子設置position: relative;這樣，圖片的位置就可以以盒子為參考點進行調整。

接著，我們定義了一個.box img{}的選擇器，代表在盒子.box中的圖片元素。為了讓圖片相對于盒子垂直居中，我們將top值設置為50%，這樣圖片的頂部就會距離盒子頂部50%的高度。為了讓圖片相對于盒子水平居中，我們將left值設置為50%，這樣圖片的左部就會距離盒子左部50%的寬度。但此時圖片的位置還不完美，為了將其完全水平垂直居中，我們需要使用transform屬性，將圖片左移50%，上移50%。

最后，為了讓圖片具有適當的大小，我們定義了一個寬度和高度都是200px的值。這樣就完成了對圖片在盒子上的位置和大小的控制。