在進行網頁布局時，我們常常使用CSS來調整元素的大小、位置、顏色等屬性。其中，圖片是頁面中常見的元素之一，但有時候我們會發現圖片不能夠完全填充到盒子中，而是超出了盒子的邊界，影響了整個頁面的效果。那么，這是為什么呢？如何解決呢？

.box{
width:200px;
height:200px;
border:1px solid #ccc;
overflow:hidden;
}
.img{
width:300px;
height:300px;
margin-left:-50px;
}
<div class="box"><img src="image.jpg" class="img" /></div>

以上是一個簡單的示例，我們設置了一個大小為200x200像素的盒子，并將其內容溢出部分隱藏了。接著，我們插入一張大小為300x300像素的圖片，并將其向左移動50像素，以使其部分超出了盒子的左邊界。

這個時候，我們就會發現圖片不進入盒子，而是出現了滾動條或者部分被遮擋的情況。這是因為，圖片的寬度和高度大于盒子的寬度和高度，所以圖片不能夠完全填充到盒子中。而我們設置了盒子的overflow為hidden，也就是隱藏超出部分，所以圖片的多余部分被切掉了。

那么，如何解決這個問題呢？有以下幾種方案：

1. 調整圖片的大小，使其不超出盒子的邊界；

   .img{
   max-width:100%;
   max-height:100%;
   }

2. 設置圖片的尺寸，并將overflow改為visible，不會隱藏超出部分，同時能讓圖片完全顯示；

   .box{
   width:200px;
   height:200px;
   border:1px solid #ccc;
   overflow:visible;
   }
   .img{
   width:200px;
   height:200px;
   margin-left:-50px;
   }

3. 使用background-image代替img標簽，將背景圖片填充到盒子中；

   .box{
   width:200px;
   height:200px;
   border:1px solid #ccc;
   background-image:url(image.jpg);
   background-size:cover;
   background-position:center;
   }

綜上所述，當圖片不能完全進入盒子時，我們可以通過調整圖片的大小或者盒子的屬性來解決這個問題，從而達到更好的頁面效果。