开发遇到的问题
我们平时开发,后台通过在线编辑器,编辑帖子,上传图片,比如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笔试面试题打包分享
感谢点赞支持下哈