在CSS中，我們可以使用多種方法將圖片以豎排的方式顯示，以下是兩種常見的方法：
1、使用CSS Flexbox：
Flexbox是一個(gè)強(qiáng)大的布局工具，可以輕松實(shí)現(xiàn)圖片的豎排顯示，我們可以將圖片作為Flex容器中的項(xiàng)目，并設(shè)置Flex方向?yàn)榱小?/p>
```html
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
```css
.image-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image-container img {
max-width: 100%;
height: auto;
}
```
2、使用CSS Grid：
CSS Grid也是一個(gè)非常強(qiáng)大的布局工具，可以用于創(chuàng)建復(fù)雜的圖片布局，我們可以將圖片放在Grid單元中，并設(shè)置Grid方向?yàn)榱小?/p>
```html
<div class="image-grid">
<div class="grid-item"><img src="image1.jpg" alt="Image 1"></div>
<div class="grid-item"><img src="image2.jpg" alt="Image 2"></div>
<div class="grid-item"><img src="image3.jpg" alt="Image 3"></div>
</div>
```
```css
.image-grid {
display: grid;
grid-template-columns: 1fr; /* or any other valid grid size */
grid-gap: 10px; /* optional gap */
}
.grid-item {
display: flex; /* or any other valid flex size */
flex-direction: column; /* or any other valid flex direction */
}
```
兩種方法都可以實(shí)現(xiàn)圖片的豎排顯示，你可以根據(jù)自己的需求選擇***適合的方法，如果你需要更多的控制或特定的布局需求，可能需要結(jié)合HTML和CSS進(jìn)行更詳細(xì)的設(shè)計(jì)。
