在網(wǎng)頁(yè)設(shè)計(jì)中，放置圖片是非常重要的一部分。在CSS中，我們可以使用盒子模型來(lái)放置圖片，為頁(yè)面增添美觀的視覺效果。

.box {
width: 400px;
height: 400px;
border: 1px solid #ccc;
padding: 20px;
margin: 20px auto;
box-sizing: border-box;
}

以上代碼創(chuàng)建了一個(gè)名為“box”的盒子，它有400px的寬度和高度，并具有1個(gè)像素的灰色邊框。Padding為20px，Margin為20px，它的盒子模型使用的是“border-box”。

現(xiàn)在，我們將在這個(gè)盒子中放置一張圖片：

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

以上代碼為“box”盒子中的圖像添加了樣式。max-width設(shè)置為100%是為了讓圖像遵循盒子的大小，在不拉伸寬度的情況下自動(dòng)縮放。height:auto使圖像保持其原始比例。

最后，我們將在HTML中添加圖像：

<div class="box">
<img src="image.jpg" alt="This is an image">
</div>

以上代碼將圖像放置在名為“box”的div中。圖像可以是任何格式，只需將img標(biāo)簽中的src屬性更改為相應(yīng)的文件路徑即可。

通過CSS將圖像放入盒子，可以創(chuàng)造出美觀的圖片效果，將頁(yè)面升級(jí)到一個(gè)新的高度。