ckeditor 图片上传_网页图片等比例缩小实现方案总结以及最佳实践

开发遇到的问题

我们平时开发，后台通过在线编辑器，编辑帖子，上传图片，比如ckeditor配置上传图片，是可以设置图片大小的；

这种设置对pc端的话 也许你设置个 800,600，还是可以的。

但是有没有考虑过移动端呢？

我们发现移动端的图片有一部分看不到的。

情况一：图片宽度占据整个网页宽度解决方案

对于情况一，比如移动端，图片是占据整个网页宽度的，这种比较好解决；

我们加img css样式即可；

img{width:100%; max-width:100%;}

注意点：

使用这种方式，编辑器添加的图片不能设置height,否则高度不能等比例的缩小，图片会变形；

如下图：

上面没有设置 高度，下面的设置了高度；

用了max-width，虽然宽度都正常缩放了，但是高度的话，下面那个设置了height属性的，就变成了，没有和宽度一起等比例缩放；

最佳实践

在线编辑器，不设置widht和height；

pc端通过js计算，动态设置；

wap端设置max-width即可；

最佳实践，完美解决；

• 程序员值得收藏的精选11套后台登录页面和管理页面模版

• 50份优秀Java求职者简历

• SpringCloud前后端分离实战项目视频教程分享

• 2020年全网最全BAT笔试面试题打包分享

感谢点赞支持下哈