在網頁制作中,經常會用到圖片,但有時候我們不想把圖片豎直展示,而是想要讓它們平放。CSS可以幫助我們輕松實現這一效果。下面是實現的具體步驟:
/*設置圖片的顯示方式為塊級元素*/ img { display: block; /*設置寬度和高度*/ width: 300px; height: 200px; /*設置外邊框*/ margin: 0 auto; /*設置圖片的垂直對齊位置*/ vertical-align: middle; /*設置背景顏色*/ background-color: #eee; /*設置圖片平放*/ transform: rotate(90deg); }
以上代碼中,我們先將圖片的顯示方式設置為塊級元素,這樣就可以設置它的寬度、高度和外邊框。接著,我們設置圖片的垂直對齊位置,并為其設置背景顏色。最后,我們使用“transform”屬性將圖片旋轉90度,從而實現圖片的平放。