本文主要是介绍奇淫技巧:移动端图片处理,设定最大宽度,高度等比处理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
有这样的应用场景:
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;
}
多的我就不说了,拿去用吧
这篇关于奇淫技巧:移动端图片处理,设定最大宽度,高度等比处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!