奇淫技巧：移动端图片处理，设定最大宽度，高度等比处理

本文主要是介绍奇淫技巧：移动端图片处理，设定最大宽度，高度等比处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

有这样的应用场景：

   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代码了。

    看这里：

.line-more-info .content img{height: auto !important;max-width: 100% !important;
}

多的我就不说了，拿去用吧

这篇关于奇淫技巧：移动端图片处理，设定最大宽度，高度等比处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---