CSS 中的圖片方向是指在頁面中顯示圖片的方向。以下是關(guān)于 CSS 圖片方向的基本知識(shí)。

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

1. 圖片方向

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

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

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

2. 圖片大小

CSS 可以通過調(diào)整圖片大小使其適應(yīng)頁面需要。

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

通過設(shè)置max-width屬性，可以控制圖片的最大寬度。可以創(chuàng)建多個(gè)類以調(diào)整圖片的大小。

3. 圖片邊框

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

img {
border: 1px solid black;
}

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

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