zoukankan      html  css  js  c++  java
  • 移动端图片处理

    有这样的应用场景:

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

    如下图使用的编辑器:

    其源码是这样:

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

    思路:

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

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

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

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

    看这里:

    img{  
        height: auto !important;  
        max-width: 100% !important;  
    }  
  • 相关阅读:
    Jenkins远程部署应用
    Centos7搭建Jenkins
    Centos7安装Docker
    Centos7安装Maven
    Centos7安装jdk
    由object元素引出的事件注册问题和层级显示问题
    ios中input输入无效
    手册
    CSS 清楚浮动总结
    JS 创建对象总结
  • 原文地址:https://www.cnblogs.com/Vayne-N/p/7279510.html
Copyright © 2011-2022 走看看