CSS 是一種用于樣式設計的語言，它可以幫助我們設計出更美觀的網頁。其中，排列和顯示圖片有著重要的作用。下面，我們來看一下如何通過 CSS 對圖片進行排列顯示。

/* 首先，設置圖片的基本樣式 */
img {
display: block; /* 塊級顯示 */
max-width: 100%; /* 最大寬度為父元素寬度 */
height: auto; /* 高度自適應 */
margin: 0 auto; /* 居中對齊 */
border: none; /* 去除邊框 */
}
/* 然后，設置圖片容器的樣式 */
.container {
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 自動換行 */
justify-content: center; /* 水平居中對齊 */
align-items: center; /* 垂直居中對齊 */
margin: 0 auto; /* 居中對齊 */
max-width: 1200px; /* 最大寬度為 1200px */
}
/* 接著，設置每個圖片容器的樣式 */
.item {
flex: 0 0 calc(25% - 20px); /* 等分四列，每列之間間隔 20px */
margin: 10px; /* 每個容器之間間隔 10px */
overflow: hidden; /* 超出容器部分隱藏 */
border-radius: 5px; /* 設置圓角 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 設置陰影 */
}
/* 最后，設置鼠標懸停效果 */
.item:hover {
transform: translateY(-5px); /* 上移 5px */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 增加陰影 */
}

上面的代碼中，我們首先通過設置圖片的基本樣式，使圖片可以根據父元素自適應寬高，并進行居中對齊。然后，我們使用 Flexbox 布局對圖片容器進行布局，使圖片可以自動換行并居中對齊。接著，我們對每個圖片容器進行細節設置，包括等分四列、圓角、陰影等。最后，我們增加了鼠標懸停效果，讓圖片容器有更加動態的感覺。