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

有这样的应用场景:

   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;
}

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

你可能感兴趣的:(奇淫技巧:移动端图片处理,设定最大宽度,高度等比处理)