CSS是網(wǎng)頁制作中必不可少的一種技術(shù)，其中圖片的處理更是需要我們掌握的技巧之一。下面我們主要介紹一下如何將圖片放入盒子中。

.box {
width: 200px;
height: 200px;
border: 1px solid gray;
text-align: center;
line-height: 200px;
}
.box img {
max-width: 100%;
max-height: 100%;
}

上面的代碼是將圖片放入盒子中的最基本樣式。我們使用了一個盒子和一個img標(biāo)簽，其中盒子設(shè)置了寬度和高度，并且有一個邊框。在盒子中通過設(shè)置text-align和line-height屬性讓圖片水平垂直居中。而img標(biāo)簽則通過max-width和max-height屬性，讓圖片的尺寸自適應(yīng)盒子的大小。

如果想要圖片和盒子之間留出一些空隙，可以通過設(shè)置padding屬性實(shí)現(xiàn)：

.box {
width: 200px;
height: 200px;
border: 1px solid gray;
text-align: center;
line-height: 200px;
padding: 10px;
}
.box img {
max-width: 100%;
max-height: 100%;
}

如果想讓圖片縮放后保持寬高比例，可以使用object-fit屬性：

.box {
width: 200px;
height: 200px;
border: 1px solid gray;
text-align: center;
line-height: 200px;
}
.box img {
width: 100%;
height: 100%;
object-fit: cover;
}

上面的代碼中，我們使用了object-fit屬性，將圖片進(jìn)行自動縮放，同時盡可能的保持寬高比例，讓圖片以覆蓋方式填充到整個盒子中。

除此之外，我們還可以通過設(shè)置background屬性，在盒子中顯示圖片：

.box {
width: 200px;
height: 200px;
border: 1px solid gray;
background-image: url("path/to/image.jpg");
background-size: cover;
background-position: center;
}

上面的代碼中，我們使用了background-image屬性，將圖片作為背景圖進(jìn)行展示，同時使用background-size屬性，讓圖片自適應(yīng)盒子的大小，而background-position屬性則用于設(shè)置圖片的位置。

綜上所述，以上幾種方式都可以很好的將圖片放入盒子中，并在不同的場景下得到不同的展示效果。我們需要根據(jù)實(shí)際需求選擇合適的方式進(jìn)行應(yīng)用。