贤话师兄
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>CSS>正文

文章内容页图片显示优化,图片居中处理

君语贤 2018-08-24 18:34 内容页图片优化样式

很多时候,在我们网站CSS代码设置不够“智能”的时候,一般默认情况下,图片居中我们都是习惯于在上传图片的时候独立设置图片的样式,然而往往在这个时候我们都是将图片设置为居中显示。因此,此种情况下,我们直接在内容页正文的图片直接采用全局样式控制就显得更为方便了,具体显示样式:

文章内容页图片显示优化,图片居中处理

图片源代码格式:

文章内容页图片显示优化,图片居中处理

css样式控制代码:

文章内容页图片显示优化,图片居中处理

详情源码:

.info-zi img, .info-zi iframe {
    max-width: 80%!important;
    height: auto!important;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
}

部分说明:这里对直接对图片的宽度做了限制,显示控制在80%的宽度,并做了圆角话处理。这样使得在自适应网站的情况能有更好的视感。

本文链接:https://blog.weguiding.com/web/css_419.html