文章内容页图片自动居中,自适应手机,宽度100%

来源:网络整理作者: 发布时间:2020-12-17 06:47

发表文章时,需要上传图片,很多内容编辑器对图片的处理是居左显示的吧.另外,如果是响应式的HTML5网站,还存在一个图...

内容页假如这样写法
<div class="detail"> 这里是内容及图片</div>

发表文章时,需要上传图片,很多内容编辑器对图片的处理是居左显示的吧.另外,如果是响应式的HTML5网站,还存在一个图片宽度太宽显示不全的问题.

这种情况,在后台上传图片时,如下图,上传成功后,图片宽度默认是图片的真实宽度,可以把他设置为100%,或留空不填,高度也留空不填.

css样式可以如下写法.如果担心在电脑上浏览时,图片过大撑破页面,可以增加一个类似这种样式.max-width:650px

.detail img{ display:block;margin:0 auto;padding:10px; /* max-width:650px */ } /*以下为兼容手机代码*/ @media(max-width:760px){ .detail img{max-width: 100%;height: auto;width: auto\9;} }

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://www.juheyunku.com/jz/dedecms/4745.shtml

上一篇：织梦后台jpeg格式图片没法

下一篇：织梦分页不完全显示页码

织梦最新发表的文章标题显示	织梦友情链接调用和图片大小
dedecms织梦后台友情链接图片不	织梦调用文章标题超过字数限
加速织梦DEDECMS企业网站模板文	DEDECMS织梦内容页调用seotitle标
织梦cms调用会员数,文章数,评论	织梦dedecms列表list调用文章作者
dedecms织梦完美解决前台会员上	织梦dedecms文章标题长度最全修
dedecms 每个栏目下的文章总数的	DEDECMS 获取当前栏目及所有子栏
dedecms 在内容模板里调用栏目内	dedecms织梦图片(仅网址)自定义
织梦提取图集中第一个图片的	织梦DEDECMS 首页列表页内容也时