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

传统方案：设置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. Python---基础---dict和set2

    2019-05-21 写一个程序来管理用户登陆系统的用户信息:登陆名字和密码,登陆用户账号建立后,已存在用户可以用登陆名字和密码重返系统,新用户不能用别人的用户名建立用户账号 ------------ ...

  2. BZOJ 3306: 树 LCT + set 维护子树信息

    可以作为 LCT 维护子树信息的模板,写的还是比较优美的. 本地可过,bzoj 时限太紧,一直 TLE #include<bits/stdc++.h> #define setIO(s) f ...

  3. 最大独立点集&最小点覆盖

    1.最大独立点集: 在二分图中,选最多的点,使得任意两个点之间没有直接边连接. 最大独立集= 最小边覆盖 = 总点数- 最大匹配 (条件:在二分图中) 2.最小边覆盖: 在二分图中,求最少的边,使得他 ...

  4. 【CF1257C】Dominated Subarray【贪心】

    题意:给定一个数组,求最小的字数组使得数组里存在至少一对重复元素 题解:每个点求出他的后继在哪,然后每次贪心就这个点到他的后继为一个子数组,求出最小的就是答案 #include<iostream ...

  5. 29 基于PCL的点云平面分割拟合算法技术路线（针对有噪声的点云数据）

    0 引言 最近项目中用到了基于PCL开发的基于平面的点云和CAD模型的配准算法,点云平面提取采用的算法如下. 1 基于PCL的点云平面分割拟合算法 2 参数及其意义介绍 (1)点云下采样 1. 参数: ...

  6. C# 调用delphi编写的dll

    技术实现 如何逐步实现动态库的加载,类型的匹配,动态链接库函数导出的定义,参考下面宏定义即可: #define LIBEXPORT_API extern "C" __declspe ...

  7. 计算一段日期内的周末天数的php代码（星期六，星期日总和）

    代码如下: /*| Author: Yang Yu <niceses@gmail.com>| @param char|int $start_date 一个有效的日期格式,例如:200910 ...

  8. 我的Podfile如下

    # Uncomment this line to define a global platform for your projectuse_frameworks!(http://www.my516.c ...

  9. UVA 11752 The Super Powers（暴力）

    题目:https://cn.vjudge.net/problem/UVA-11752 题解:这里只讨论处理越界的问题. 因为题目最上界是 264-1. 我们又是求次幂的. 所以当我们就可以知道 i 的 ...

  10. pandas melt 与pivot 函数

    (掌握这个,基本就完美无缺的任意按照自己的想法,更改列了.) 背景: 最近有个excel 数据需要转化的过程. 数据量还挺大的,大概有30多万. 需要把某些行变成列,有些列又变成行. 这个操作本身就比 ...