一、总览

Image的mode是指图片裁剪、缩放的模式,共有14个合法值,分别是:

   /** 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 */
scaleToFill
/** 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 */
aspectFit
/** 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 */
aspectFill
/** 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 */
widthFix
/** 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 */
heightFix
/** 裁剪模式,不缩放图片,只显示图片的顶部区域 */
top
/** 裁剪模式,不缩放图片,只显示图片的底部区域 */
bottom
/** 裁剪模式,不缩放图片,只显示图片的中间区域 */
center
/** 裁剪模式,不缩放图片,只显示图片的左边区域 */
left
/** 裁剪模式,不缩放图片,只显示图片的右边区域 */
right
/** 裁剪模式,不缩放图片,只显示图片的左上边区域 */
'top left'
/** 裁剪模式,不缩放图片,只显示图片的右上边区域 */
'top right'
/** 裁剪模式,不缩放图片,只显示图片的左下边区域 */
'bottom left'
/** 裁剪模式,不缩放图片,只显示图片的右下边区域 */
'bottom right'

二、例子

看字比较麻烦,下面看图吧

0、原图

(图一)

(图二)

1、scaleToFill(默认) 缩放 && 拉伸 && 完整

2、aspectFit  缩放 && 不拉伸 && 完整

3、aspectFill(常用)  缩放 && 不拉伸 && 不完整

4、widthFix

4、heightFix

5、其他位置(top、bottom、left、right……)   不缩放 && 不拉伸 && 不完整

END---------------------------------

Every day is Sunday

每天对于我而言都像周末一样愉快

Every day's a new day

每天对于我而言都是崭新的一天

To be with you

只要和你一起

To be with you

悲伤也会变成快乐

关于Image的mode属性(多图示例)的更多相关文章

  1. 类图示例-订单系统 / Class Diagram - Order System

    类图示例-订单系统 / Class Diagram - Order System 什么是类图? 类图通过显示它的类和它们之间的关系来概述系统.类图是静态的 - 它们显示交互的内容,但不显示交互时会发生 ...

  2. konva canvas插件写雷达图示例

    最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中:Konva canva ...

  3. FineReport新增多项目甘特图示例及操作

    1.描述 我们在做报表的时候,往往想体现其中随着时间的变化而产生的项目进度的变化和其他相关的系统进展,每当这种时候甘特图便是其中的不二之选.FineReport新增的多项目甘特图可以说是满足了大多数的 ...

  4. StarUML之八、StarUML的Entity-Relationship Diagram(实体关系图)示例

    数据库表关系设计也是常有场景,本章介绍如何设计一个实体关系图 1:新建项目,在Model Explore中Add Diagram | ER Diagram到指定的元素中: 2:从Toolbox中创建E ...

  5. StarUML之七、StarUML的Class Diagram(类图)示例

    UML 类图中的概念 类图关系:泛化(继承).实现.聚合.组合.关联.依赖 类图的详解可在网上查询(推荐https://zhuanlan.zhihu.com/p/24576502) 它描述了在一个系统 ...

  6. 使用egypt+graphviz生成函数调用关系图示例

    总结: make  (-fdump-rtl-expand)  去除编译优化,比如-O3 egypt test.c.128r.expand >test.dot  可以手动打开dot文件去除一些孤立 ...

  7. matplotlib 出图示例

    如果你想要在Linxu中获得一个高效.自动化.高质量的科学画图的解决方案,应该考虑尝试下matplotlib库.Matplotlib是基于python的开源科学测绘包,基于python软件基金会许可证 ...

  8. Unity 属性雷达图

    using System.Collections.Generic; using UnityEngine; [RequireComponent(typeof(MeshFilter),typeof(Mes ...

  9. Confluence 6 属性的一个示例

    下面是有关 Confluence 页面被调用的前几行的访问概述. [344ms] - /display/ds/Confluence+Overview [313ms] - SiteMesh: parse ...

  10. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. [转帖]tidb集群部署

    http://blog.itpub.net/29785807/viewspace-2789852/ 一.安装规划 1 2 3 4 5 6 使用15台服务器 5台tidb服务器:每台3个tidb实例+1 ...

  2. [转帖]解释docker单机部署kraft模式kafka集群时,尝试各种方式的网络broker全部不通而启动失败的原因,并提示常见bug关注点

    现象: controller节点与其他两个broker的通信失败.公网ip,宿主机ip,服务名,各种网络方式,都无法成功. 两点提示: 1.bug原因:因为单机内存不够用,设置了较低的 KAFKA_H ...

  3. 【转帖】Linux查看二进制文件:一招制敌(linux二进制查看文件)

    https://www.dbs724.com/146055.html 一招制敌:学会Linux查看二进制文件 在Linux操作系统中,二进制文件是一种常见的文件类型.如果你想深入了解一个二进制文件,可 ...

  4. CS231N Assignment1 softmax 笔记

    -为Softmax分类器实现完全矢量化的损失函数 -实现解析梯度完全矢量化的表达式 使用数值梯度检查实现结果 使用验证集调整学习率和正则化强度 使用SGD优化损失函数 可视化最终学习的权重 softm ...

  5. 分布式日志追踪ID实战 | 京东物流技术团队

    本文通过介绍分布式应用下各个场景的全局日志ID透传思路,以及介绍分布式日志追踪ID简单实现原理和实战效果,从而达到通过提高日志查询排查问题的效率. 背景 开发排查系统问题用得最多的手段就是查看系统日志 ...

  6. Docker容器基础入门认知-Cgroup

    在上一篇说完 namespace 给容器技术提供了隔离之后,我们在介绍一下容器的"限制"问题 也许你会好奇,我们不是已经通过 Linux Namespace 给容器创建了一个容器了 ...

  7. js引起的 xxxx of null

    在 vue 中操作 dom 元素的时候,报错 style of null 这个报错的原因,跟你代码的健壮性有关了; 这样就不会报错了 if( document.querySelectorAll(&qu ...

  8. windowsbat命令大全

    Bat文件的创建及其命令大全 一.bat文件的创建 新建txt文本文件 向文本文件中输入命令 保存并修改文本文件后缀为.bat 双击保存后的bat文件,运行 二.bat命令大全 echo 和 @ @ ...

  9. 10.5 认识XEDParse汇编引擎

    XEDParse 是一款开源的x86指令编码库,该库用于将MASM语法的汇编指令级转换为对等的机器码,并以XED格式输出,目前该库支持x86.x64平台下的汇编编码,XEDParse的特点是高效.准确 ...

  10. Python 实现ARP扫描与欺骗

    ARP欺骗又称ARP毒化或ARP攻击,是针对以太网地址解析协议ARP的一种攻击技术,通过欺骗局域网内访问者PC的网关MAC地址,使访问者PC错以为攻击者更改后的MAC地址是网关的MAC,导致网络不通. ...