CSS中如何把圖片豎著排

在CSS中，我們可以使用transform屬性將圖片旋轉(zhuǎn)90度，從而實(shí)現(xiàn)圖片的豎排效果，以下是一個(gè)簡單的示例代碼：

HTML代碼：

<img class="vertical-image" src="image.jpg" alt="示例圖片">

CSS代碼：

.vertical-image {
  transform: rotate(90deg);
}

在這個(gè)示例中，我們定義了一個(gè)名為.vertical-image的CSS類，并將圖片元素應(yīng)用了這個(gè)類，通過transform: rotate(90deg);屬性，我們將圖片旋轉(zhuǎn)了90度，實(shí)現(xiàn)了豎排效果。

需要注意的是，這種方法可能會(huì)導(dǎo)致圖片的高度和寬度發(fā)生變化，如果需要保持圖片的尺寸不變，可以在旋轉(zhuǎn)圖片的同時(shí)，使用width和height屬性設(shè)置圖片的尺寸。

.vertical-image {
  transform: rotate(90deg);
  width: 100px;
  height: 100px;
}

在這個(gè)示例中，我們將圖片旋轉(zhuǎn)了90度，并保持圖片的高度和寬度都為100像素，這樣，圖片在豎排的同時(shí)，尺寸也不會(huì)發(fā)生變化。