图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?
1. 首先看下如何以40*40显示第二张图片:

正常显示css代码
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-circle {
width: 40px;
height: 40px;
background-position: -40px 0;
}
正常显示html代码
<i class="sprite sprite-circle"></i>

2. 接下来以20*20显示第一张图片:

等比例显示css代码
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
background-size: 40px auto; //背景图片的宽度缩减到一半,高度自适应
}
.sprite-circle { //图片大小缩小到一半
width: 20px;
height: 20px;
background-position: -20px 0; //背景图片的位置也相应的缩减到一半
} 等比例显示html代码
<i class="sprite sprite-circle"></i>

3.总结:
诀窍在于,背景图片缩小固定的比例,背景图片的偏移量也缩小相应的比例。

Css Sprite 图片等比缩放图片大小的更多相关文章

  1. 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  2. 【python】显示图片 并随意缩放图片大小 图片归一化

    cv2.namedWindow("image_",0)  cv2.imshow("image_",image)就可以随意缩放显示图片的窗口大小啦. ------ ...

  3. CSS Sprite精灵图如何缩放大小

    transform:scale( x ): 语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制. 例如:transform: scale( ...

  4. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  5. 【Thumbnailator】java 使用Thumbnailator实现等比例缩放图片,旋转图片等【转载】

    Thumbnailator概述:     Thumbnailator是与Java界面流畅的缩略图生成库.它简化了通过提供一个API允许精细的缩略图生成调整生产从现有的图像文件的缩略图和图像对象的过程, ...

  6. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  7. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  8. 记一次产品需求:图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  9. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

随机推荐

  1. RovingUI组件库-包含堆栈式通知提醒框(Toast)的小程序组件库

    RovingUI是个人在开发小程序过程中将用到的组件集合而成的一个UI库,包含一些基本通用组件(按钮.栅格.通用样式.徽标.通知和面包屑). 源起得归于我在开发中没有找到现成的堆栈式提醒框(比如ant ...

  2. 0527 SCRUM团队项目7.0

    Sprint回顾 让我们一次比一次做得更好.   1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. ...

  3. lintcode-387-最小差

    387-最小差 给定两个整数数组(第一个是数组 A,第二个是数组 B),在数组 A 中取 A[i],数组 B 中取 B[j],A[i] 和 B[j]两者的差越小越好(|A[i] - B[j]|).返回 ...

  4. JavaScript DOM编程艺术学习笔记-第一章JavaScript简史

    一,JavaScript的起源 JavaScript是Netscape与Sun公司合作开发,它是一种脚本语言,通常只能通过Web浏览器去完成一些操作.JavaScript为程序员提供了一些操控Web浏 ...

  5. 【BioCode】将多个蛋白质序列分成单个的txt文档

    代码说明: fasta格式的蛋白质序列,一个txt里面有很多蛋白质序列,计算ss.pssm或disorder score时候都需要单条计算,需要分开. 分割前: 分割后: show you the c ...

  6. HDU 2105 The Center of Gravity

    http://acm.hdu.edu.cn/showproblem.php?pid=2105 Problem Description Everyone know the story that how ...

  7. Oracle schema 的含义

    方案(Schema)为数据库对象的集合,为了区分各个集合,我们需要给这个集合起个名字,这些名字就是我们在企业管理器的方案下看到的许多类似用户名的节点,这些类似用户名的节点其实就是一个schema,sc ...

  8. 在dbgrid中如何多行选中记录(ctl与shift均可用)

    在dbgrid中如何多行选中记录(ctl与shift均可用),设置dbgrid的dgmultiselect为true,只有ctl好用而shift不好用,如何使shift也好用 Dbgrid源代码:pr ...

  9. CCSDS标准的LDPC编译码仿真

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  10. NoSQL - Redis应用场景

         问题的引入 DB(Oracle.MySQL.Postgresql等)+Memcached 这种架构模式在我们生产环境中十分常见,一般我们通过Memcached将热点数据加载到cache,应用 ...