如何使文章内容中的图片在手机上完美展示

移动互联网时代，网站从移动客户端获得的访客日愈加多，网站排版如果不能在手机上显示良好，会有很多遗憾。

其实对于移动兼容，只要遵循几个规则，就可以，其中包括：

• 不要限定图片大小，让其自由伸展，即CSS中定义图片宽度width:100%，而不是指定特定大小

• 图片选用时考虑到PC和手机两个显示场景

具体到详细的编辑器中，我们可以按以下几步操作：

1、切图

我们以逐浪CMS3.6下载页为演示：https://www.z01.com/down/3047.shtml

一般我们要定义在PC下显示的最大宽度，这个页面中图片最大宽度为820px，那么在做图时最大宽度为820，一般推荐为580-820都是合理的宽度，即不能太大，也不能太小（太大加载慢、显示不完整、占用流量大，太小则在PC上大屏幕看显示不清晰）。

有一种不太好的恶习是很多内容编辑喜欢直接用单反拍的图直接上传，这类图片一般至少2800px宽，显然超出了常用大小。

所以我们用Photoshop等软件进行合理的切图（甚至是用QQ截图缩小原图保存后再上传），都是一个必须的流程。

2、上图

在编辑器中上传图片，如下所示：

图片上传好后，保存发布这篇文章。

3、取消大小定义

虽然上一步已经发布了文章，由于传统浏览器的智能算法，或编辑的一些定义，会为它自动补上图片真实的大小定义，这时我们需要重新编辑这条已经发布的文章。

我们可以检视编辑区的代码样式，如果出现这样明文限定图片大小的代码片断即是要处理的：

点击编辑文章一，点击编辑器左上角的“HTML"符号，进入代码区，找到相应的图片，取消其中的大小定义：

删除其中大小定义的属性，如下所示即是有效的代码：

删除了大小定义后，重新点击左上角“HTML”符号，保存修改的文章，即可。

这里需要注意的是，删除了大小后，一定要点击左上角“HTML”按钮回到可视编辑区，否则跳过这一步直接保存文章，代码编辑行为不会生效的

4、发布

这里我们在前台看，就能看发现图片能在手机、pad、PC多种显示平台下自动响应了，如下所示：

总结：

1、图片要进行处理，在互联网的世界，任何轻易的获得都是烦恼渊薮，只有专业的人工处理才能受访客尊重。

2、不要强制在CSS定义编辑器发布内容的图片大小，否则总会影响自适应。

3、在编辑器处理上传图片时，不要定义图片大小，让它由全系统的响应式样式来决定。