移动端图片处理

有这样的应用场景：

   PC端和移动端共用了一套控制器，但是他们的html渲染是不同的，那么在PC后台里录入的一些图片就会出现问题。有的图片在 img 标签里被编辑器定义了宽高，一般CSS影响不到。

如下图使用的编辑器：

 

其源码是这样：

这虽然方便了不懂前端代码的人。但是对于多端显示就会出现问题。比如移动端的图片被定义了超过屏幕的宽。

思路：

   移动端处理这个问题时，首先应该保证img的最大宽度不能超过屏幕大小，不然就会显示不全，所以应该定义max-width。

   假设移动端宽度 640px，编辑器中有图片 img src="xx" style="width:1000px;height:500px;"  那么我们看到由于受max-width影响，宽度变成了最大640px,但是高度还是500哎，于是图片变形了

 

   有人会说，我可以用 JS 来控制它的高度的，通过算取原来的宽高比，然后缩放和保持这个比例就可以了。

 

   bingo，亲测可用，我也这么做过。但是我们要是能去掉它的高度属性，那么高度不就自动跟着变的么？这样通过纯css就能处理了，不需要再引入一段js代码了。

看这里：

img{  
    height: auto !important;  
    max-width: 100% !important;  
}  

 

转载于:https://www.cnblogs.com/Vayne-N/p/7279510.html