css 图片方向 |css的px宽度高度

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 美化网页。