CSS 是前端開發(fā)中最重要的技術(shù)之一，它可以控制 HTML 頁面的樣式和布局。其中，橫向顯示的圖片與豎向顯示的圖片在開發(fā)過程中都很常見。我們可以使用 CSS 來實現(xiàn)圖片的橫豎變換。

/* 橫向圖片變豎向 */
img {
width: auto;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
transform: rotate(90deg);
}
/* 豎向圖片變橫向 */
img {
width: 100%;
height: auto;
max-height: 100%;
display: block;
margin: 0 auto;
transform: rotate(-90deg);
}

以上代碼分別實現(xiàn)了橫向圖片變豎向和豎向圖片變橫向的效果。其中，width和height控制了圖片的寬度和高度，max-width和max-height限制了圖片的最大寬度和最大高度。使用display: block;將圖片轉(zhuǎn)化為塊級元素，讓其在頁面中垂直居中。

最關(guān)鍵的是使用transform: rotate(90deg);將橫向圖片旋轉(zhuǎn) 90 度，從而變?yōu)樨Q向圖片。同理，使用transform: rotate(-90deg);將豎向圖片旋轉(zhuǎn) -90 度，變?yōu)闄M向圖片。

總結(jié)起來，只需要掌握以上 CSS 屬性，就可以輕松地實現(xiàn)圖片的橫豎變換。這種技術(shù)在實際開發(fā)中也非常有用，能夠幫助我們快速解決一些頁面顯示問題。