[分享]css内容自适应居中显示图片

在网页设计中，图片的展示是非常重要的。而我们通常都希望图片能够自适应居中展示，这样即美观又方便用户浏览。那么，在实现这一效果时，CSS的使用是必不可少的。下面，我们就来介绍一下如何使用CSS实现图片的...

在网页设计中，图片的展示是非常重要的。而我们通常都希望图片能够自适应居中展示，这样即美观又方便用户浏览。那么，在实现这一效果时，CSS的使用是必不可少的。
下面，我们就来介绍一下如何使用CSS实现图片的自适应居中展示。
首先，我们需要准备一张图片。例如，我们使用以下代码插入一张名为“example.jpg”的图片。

<img src="example.jpg" alt="example picture">

接下来，我们需要使用CSS来实现图片的自适应居中展示。具体的实现方法如下：

p {<br>
    display: flex;<br>
    justify-content: center;<br>
    align-items: center;<br>
    height: 100vh;<br>
}<br>
img {<br>
    max-width: 100%;<br>
    max-height: 100%;<br>
    object-fit: contain;<br>
}

这段代码的含义是，将段落（p）元素设为弹性布局（flex），并设置垂直方向居中（align-items: center）和水平方向居中（justify-content: center）。接着，设置图片（img）元素的最大宽度和最大高度都为100%（max-width: 100%; max-height: 100%），并让图片按照原始比例适应容器大小（object-fit: contain）。
然后，我们将图片插入到该段落元素中，即可实现自适应居中展示的效果。例如：

<p><br>
  <img src="example.png" alt="example picture"><br>
</p>

当然，我们也可以灵活调整CSS样式来适应不同的情况。例如，如果我们不想让图片占据整个屏幕高度，而是想让它在父元素中居中，可以将段落元素的高度去除，然后将父元素（如div元素）设为弹性布局，达到相同的效果。
以上就是使用CSS实现图片自适应居中展示的方法。希望对你有所帮助！