CSS如何實現圖片豎直顯示？ 有時候，我們需要在網頁上展示豎直的圖片，但是通過默認的方式，圖片都是水平的展示。那么該如何在CSS中實現豎直展示呢？ 首先，我們需要理解圖片展示的規則。一般情況下，圖片的展示是按照水平方向來的，也就是默認情況下，圖片會占據一定的寬度，高度進行等比例縮放，此時圖片呈現水平狀態。 為了讓圖片豎直展示，我們需要在CSS中進行樣式的設置，這里提供兩種方法： 1、使用transform屬性 transform屬性是一個非常強大的變換屬性，在這里能夠幫助我們實現圖片的旋轉和翻轉等效果。 對于圖片豎直展示，我們可以使用rotate()函數進行實現。具體代碼如下： pre { transform: rotate(90deg); } 上述代碼表示對pre標簽下的所有內容進行90度的旋轉，也就是圖片將向右旋轉90度，從而呈現豎直狀態。 2、改變圖片的寬高 在實現圖片豎直展示的過程中，我們也可以改變圖片的寬高比例，從而實現豎直顯示的效果。 具體代碼如下： p img { width: auto; height: 450px; margin: 0 auto; } 上述代碼中，我們指定了圖片的高度為400px，同時將寬度設置為auto（也就是自適應），并使用margin屬性進行居中顯示。 通過這兩種方法中的任意方式，我們就能夠實現圖片豎直展示的效果。在具體應用中，根據實際需求和圖片大小會有所不同，但核心原理是一樣的。