CSS 中的圖片方向是指在頁面中顯示圖片的方向。以下是關于 CSS 圖片方向的基本知識。

img {
display: block; /* 避免圖片下方有空行 */
max-width: 100%;
height: auto; /* 維持圖片寬高比 */
}

1. 圖片方向

CSS 允許在頁面中以水平或垂直方向顯示圖片。

img.horizontal {
display: inline;
}
img.vertical {
transform: rotate(90deg);
transform-origin: top left;
}

將圖片旋轉 90 度可使其垂直顯示。使用transform-origin屬性可控制旋轉中心。

2. 圖片大小

CSS 可以通過調整圖片大小使其適應頁面需要。

img {
max-width: 100%;
height: auto; /* 維持圖片寬高比 */
}
img.small {
max-width: 50%;
}
img.large {
max-width: 90%;
}

通過設置max-width屬性，可以控制圖片的最大寬度。可以創建多個類以調整圖片的大小。

3. 圖片邊框

CSS 還支持為圖片添加邊框。

img {
border: 1px solid black;
}

使用border屬性可為圖片添加邊框，指定邊框顏色、風格和寬度。

總之，CSS 提供了豐富的方法來控制圖片在頁面中的方向、大小和邊框。掌握這些基本知識，就能更好地利用 CSS 美化網頁。