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

传统方案：设置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. 【串线篇】spring boot页面模板引擎

    如JSP.Velocity.Freemarker.Thymeleaf SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: 一.引入thymeleaf <dependency& ...

  2. 1.Linux安装redis

    Linux安装redis 操作系统是Centos7 1.下载压缩包 2.解压 3.编译 4.启动redis 5.设置redis.conf和防火墙端口开放,外网可以访问 1.下载压缩包 下载地址:htt ...

  3. 基于MaxCompute InformationSchema进行冷门表热门表访问分析

    一.需求场景分析 在实际的数据平台运营管理过程中,数据表的规模往往随着更多业务数据的接入以及数据应用的建设而逐渐增长到非常大的规模,数据管理人员往往希望能够利用元数据的分析来更好地掌握不同数据表的使用 ...

  4. .HDF数据库与SQLSERVER / ORACLE的区别

    无论ArcGIS的.gbd文件还是MapGIS的.hdf文件,都是数据库文件. 后缀是无意义的.有意义的是其中内在的逻辑和数据结构. https://zhidao.baidu.com/question ...

  5. C#中给RICHTEXTBOX加上背景图片

    在系统自带的RichTextBox中是无法给它设置背景图片,但是我们在某些场合可能需要给RichTextBox设置背景图片.那么怎么实现这一想法呢?经过研究发现通过其它巧妙的途径可以给RichText ...

  6. [APIO2013]道路费用

    题目描述 幸福国度可以用 N 个城镇(用 1 到 N 编号)构成的集合来描述,这些城镇 最开始由 M 条双向道路(用 1 到 M 编号)连接.城镇 1 是中央城镇.保证一个 人从城镇 1 出发,经过这 ...

  7. linux系统忘记root密码的解决办法--(超细致讲解！)

    在本博客中我采用虚拟机和radhet6.5作为示范: 首先:重新系统系统,在系统重新启动是未进入系统检查之前按下"e"键: 一定要在倒计时到0秒之前按下"e", ...

  8. 【OpenCV】 在CentOS下搭建OpenCV开发环境

    最近开始入模式识别的坑,自然被迫上OpenCV了. 在多次尝试给VS2015扩展Windows 10 SDK无果后(不要问我为啥..VS2015开发C++的标准库全给扔到这个SDK里了,打包在VS安装 ...

  9. linux RZ 命令

    root 账号登陆后,依次执行以下命令: 1 cd /tmp 2 wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz 3 tar zxv ...

  10. VUEJS(vuejs) 数组数据不及时刷新

    在Vue对象中的methods属性中构建一个方法用于刷新data使用Vue.set方法进行手动刷新methods:{update:function(o){Vue.set(this,'list',o); ...