CSS圖片比盒子大是前端開發中經常遇到的問題。在網頁制作過程中，我們有時候需要把一個圖片設置成盒子的背景圖，但是卻發現圖片顯示出來比盒子大，怎么辦呢？下面我們來詳細分析一下這個問題。

.box{
background: url('image.jpg') no-repeat;
width: 200px;
height: 200px;
}

以上代碼是設置盒子.box背景圖為image.jpg，并且盒子大小為200px*200px。如果我們用這個代碼，發現圖片不止200px大小，超出了盒子的范圍，這個時候就出現了圖片比盒子大的問題。

產生這個問題的原因，是因為實際上我們指定的是盒子的大小，但是盒子的大小包括邊框（border）、內邊距（padding）和內容（content）。而CSS中設置的背景圖片，實際上是在邊框內部的內容區域，而不是整個盒子的范圍。

因此，如果我們想要解決圖片比盒子大的問題，需要用一些技巧。實際上我們需要把背景圖放在盒子的內邊距區域，而不是內容區域。可以使用padding實現這個目的，例如：

.box{
background: url('image.jpg') no-repeat;
width: 200px;
height: 200px;
padding: 20px;
box-sizing: border-box;
}

在這個代碼中，我們給盒子添加了padding為20px，并且把盒子的盒模型設置為box-sizing:border-box。這樣，盒子大小不會再計算padding的大小了，而是包括了padding在內。這樣一來，背景圖也就顯示在了盒子內邊距的位置，不會再比盒子大了。

需要注意的是，box-sizing:border-box會影響盒子的盒模型，所有設置的padding和border都將會包含在盒子的大小內。因此，在實際開發中，需要根據具體需求進行設置。