html中图片自动换行代码

在网页设计中，图片常常是不可或缺的元素。而当图片宽度超过容器宽度时，我们通常需要自动将图片换行，避免页面布局出现混乱。下面我们就来学习在HTML中如何实现图片自动换行的方法。

img {
    max-width: 100%;
    height: auto;
    display: block; 
    margin: auto;
}

首先，需要使用CSS来对图片进行样式设置。其中max-width设置为100%表示图片最大宽度不超过容器宽度，而height设置为auto则自动适应图片比例大小。同时，使用display: block可以使图片居中显示。最后通过margin: auto来将图片在容器中居中对齐。

接下来，我们将img标签放置在p标签中，并设置p标签的宽度和文本居中。如下示例：

p {
    text-align:center;
    width: 800px;
}

最后，在HTML页面上插入图片，就能看到它自动换行的效果了。

<p>
    <img src="example.jpg" alt="example" />
</p>

这样设置之后，不管图片多大，容器的宽度都会被撑开，图片会自动适应大小，并在超过容器宽度时自动换行。