在網頁制作過程中，經常會用到圖片，但是有時候我們希望圖片不要填滿整個容器，而是保留一定的間距。這時候就需要使用CSS來控制圖片的大小和位置。

首先，我們需要將圖片放置在一個容器中，可以使用div標簽或者img標簽。然后，使用CSS來控制容器和圖片的大小和位置。具體的方法如下：

.container {
width: 500px; /* 容器的寬度 */
height: 300px; /* 容器的高度 */
margin: 50px auto; /* 居中顯示 */
position: relative; /* 設置為相對定位，用于控制圖片的位置 */
}
.container img {
max-width: 100%; /* 設置圖片的最大寬度為100% */
max-height: 100%; /* 設置圖片的最大高度為100% */
position: absolute; /* 設置為絕對定位，用于控制圖片的位置 */
top: 50%; /* 將圖片的頂部與容器的中心對齊 */
left: 50%; /* 將圖片的左側與容器的中心對齊 */
transform: translate(-50%, -50%); /* 將圖片向左上角移動一半的寬度和高度，以保持居中 */
}

上面的代碼中，我們首先設置容器的大小和居中顯示。然后，我們將圖片的最大寬度和最大高度都設置為100%，以保證圖片不會超出容器的大小。

接著，我們將圖片設置為絕對定位，并將其頂部和左側分別與容器的中心對齊。然后，使用transform屬性將圖片向左上角移動一半的寬度和高度，以保持居中顯示。

這樣，我們就可以讓圖片保持一定的間距，并且居中顯示在容器內部了。