需求：后台传过来的图片不能够压缩，即使部分被截取也可以

传统方案：设置img元素如下：

       width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

但是这种方案需要img元素的外部设置一层父元素，高度与宽度为图片的高宽度

缺点：层级嵌套又增加了一层，不利于性能

现有方案：css的img有一个比较小众的属性 object-fit,具体可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit:cover 即可按照比例 注意兼容性哦

H5中图片按照比例收缩，放大的更多相关文章

  1. Android中图片的处理（放大缩小，去色，转换格式，增加水印等）（转）

    原文地址:http://menxu.lofter.com/post/164b9d_3ebf79 package com.teamkn.base.utils; import java.io.ByteAr ...

  2. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  3. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  4. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  5. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  6. 从web图片裁剪出发：了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  7. [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中，放大报错问题

    React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...

  8. PhotoView实现图片随手势的放大缩小的效果

    项目需求:在listView的条目中如果有图片,点击条目,实现图片的放大,并且图片可以根据手势来控制图片放大缩小的比例.类似于微信朋友圈中查看好友发布的照片所实现的效果. 思路是这样的:当点击条目的时 ...

  9. 用H5中的Canvas等技术制作海报

    在去年的时候也实现过合成海报的功能,不过当时时间仓促,实现的比较简单. 就一个旋转功能,图片也不能拖动放大,也不能裁剪. 去年的实现可以参考<移动图片操作--上传>和<移动图片操作- ...

随机推荐

  1. glDrawArrays 和 glDrawElements

     在openGL中,所有图形都是通过分解成三角形的方式进行绘制.(一个矩形分解成两个三角形进行绘制) glDrawArrays 和 glDrawElements 的作用都是从一个数据数组中提取数据渲染 ...

  2. python3-disc和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...

  3. python-条件判断

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  4. js undefined三目运算

    js ajax传值中 "id":$('#id').val(), 如果#id不存在,使用$('#id').val()||‘’,可避免向后台传入undefined

  5. frugally-deep: Header-only library for using Keras models in C++

    // Convenience wrapper around predict for models with // single tensor outputs of shape (1, 1, 1), / ...

  6. MyCat的启动

    启动MyCat: ./mycat start 查看启动状态: ./mycat status 停止: ./mycat stop 重启: ./mycat restart 

  7. php strlen()函数 语法

    php strlen()函数 语法 作用:返回字符串的长度.大理石平台价格 语法:strlen(string) 参数: 参数 描述 string 必需.规定要检查的字符串.     说明:返回字符串的 ...

  8. php strripos()函数 语法

    php strripos()函数 语法 作用:寻找某字符串中某字符最后出现的位置,不区分大小写.大理石平台 语法:strripos(string,find,start) 参数: 参数 描述 strin ...

  9. CF700E Cool Slogans 后缀自动机 + right集合线段树合并 + 树形DP

    题目描述 给出一个长度为n的字符串s[1],由小写字母组成.定义一个字符串序列s[1....k],满足性质:s[i]在s[i-1] (i>=2)中出现至少两次(位置可重叠),问最大的k是多少,使 ...

  10. prim 模板

    #include<cstdio> #include<vector> #include<cstring> #include<set> #define ma ...