html做网页怎么把图片竖着放

在制作网页的时候，我们经常会遇到需要展示图片的需求，为了让页面布局更加美观或者是为了适应特定的设计要求，我们可能需要将图片竖着放置，在HTML中，实现这个功能其实并不复杂，只需要一些简单的CSS样式就可以达到效果，下面，我将详细介绍如何通过HTML和CSS来实现图片竖着放的方法。

```

```

在这个例子中，`.vertical-image`类应用了`transform: rotate(90deg);`样式，这使得图片旋转了90度，`transform-origin: bottom left;`则指定了旋转的原点，确保图片是从左下角开始旋转的，从而实现竖直显示的效果。

### 方法二：使用CSS的`writing-mode`属性

另一种方法是通过改变元素的书写模式来实现图片的竖直显示，这种方法适用于需要将整个区域的内容都竖直排列的情况，包括图片，以下是代码示例：

```html

```

在这个例子中，`.vertical-container`类使用了`writing-mode: vertical-rl;`样式，这改变了容器内的书写模式，使得内容（包括图片）从上到下竖直排列。

### 注意事项

1. **图片尺寸**：在竖直放置图片时，可能会因为图片的原始尺寸而导致布局问题，确保在设计时考虑到图片的尺寸和页面布局的适应性。

2. **浏览器兼容性**：虽然大多数现代浏览器都支持`transform`和`writing-mode`属性，但在一些老旧的浏览器中可能存在兼容性问题，在实际应用中，需要根据目标用户群体的浏览器使用情况来决定是否使用这些属性。

通过上述方法，你可以轻松地在网页中竖直放置图片，无论是通过旋转还是改变书写模式，都能达到理想的效果，希望这些信息能帮助你在网页设计中实现更加灵活和美观的图片展示。