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

传统方案：设置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进阶：装饰器

    1.闭包 简单理解:闭包就是多层函数的嵌套,外层函数的返回值是内层函数的引用. def out_func(n): num = 100 def in_fucn(*args,**kwargs): # no ...

  2. hdu 4845 : 拯救大兵瑞恩 (bfs+状态压缩)

    题目链接 #include<bits/stdc++.h> using namespace std; typedef long long LL; int n,m,p,s,k; ,,,-}; ...

  3. 一些vue 响应式系统的底层的细节

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/ ...

  4. LeetCode--044--通配符匹配（java）*

    给定一个字符串 (s) 和一个字符模式 (p) ,实现一个支持 '?' 和 '*' 的通配符匹配. '?' 可以匹配任何单个字符. '*' 可以匹配任意字符串(包括空字符串). 两个字符串完全匹配才算 ...

  5. Linux内核设计与实现 总结笔记（第四章）进程调度

    进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间. 调度程序没有太复杂的原理,最大限度地利用处理器时间的原则是,只要有可以执行的进程,那么就总会有进程正在执行. 一.多任务 多任 ...

  6. Cocoapods组件化之搭建组件化项目框架

    一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...

  7. 【CF1243C】 Tile Painting【思维】

    题意:给定长度为n的方块,要求染色,需要满足:当|j-i|>1且n%|j-i|==0时,两格颜色相同,求做多可以染多少种颜色 题解:求出n的所有质因子 1.若只有一种质因子,则答案为该质因子 2 ...

  8. Arithmetic Sequence

    Arithmetic Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  9. instagram

    https://www.instagram.com/graphql/query/?query_hash=42323d64886122307be10013ad2dcc44&variables={ ...

  10. LintCode之主元素

    题目描述: 分析:由题目可知这个数组不为空且该主元素一定存在,我选用HashMap来存储,HashMap的存储结构是”键—值对“,”键“用来存储数组元素,”值“用来存储这个元素出现的次数,然后循环遍历 ...