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

传统方案：设置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. 爬虫技术：从sougou网站访问微信公众号的过程

    一:分析过程:fidder + chrome开发者工具 1:输入nba跳转的页面,每页显示10条相关公众号的信息 2:分析网站得到每条标题的详情页链接地址在: 3,请求上图中的url,会返回一段js代 ...

  2. Java第二阶段笔记

    抽象类不能创建对象 抽象类可以有构造方法成员变量成员方法静态方法final修饰的方法(只能被子类调用,不能被重写)抽象方法(可以有0个或多个) 抽象方法不能有方法体,只能以:结尾,只能存在于抽象方法中 ...

  3. R reticulate 设置 python 环境

    library("reticulate") use_python("/usr/bin/python", required = T) py_config() 注意 ...

  4. 9：关于Maven工程的文件标识（定义java文件源码，资源文件）

  5. 51nod 1514 美妙的序列 分治NTT + 容斥

    Code: #include<bits/stdc++.h> #define ll long long #define mod 998244353 #define maxn 400000 # ...

  6. 虚拟机CentOS7安装docker并搭建Gitlab私服

    一.下载安装虚拟机和CentOS7系统 这些流程比较简单不会有什么坑,这里不再阐述 二.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验 ...

  7. 20180708-Java运算符

    public class Test{ public static void main(String args[]){ int a = 10; int b = 20; int c = 25; int d ...

  8. BUUCTF |[0CTF 2016]piapiapia

    步骤: nickname[]=wherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewhere ...

  9. sqlalchemy.exc.NoForeignKeysError：Can't find any foreign key relationships between

    这句话的意思是,两张表之间的外键找不到,首先看看外键设置正确了没,如果外键没问题,看看是不是_tablename_设置了没,就是再model中,定义类的时候,表格名称要_tablename_设置一下, ...

  10. Docker容器日常操作命令

    在Docker的运用中,从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一 种文件或脚本,我们把想执行的操作以命令的方式写入其 ...