Css Sprite 图片等比缩放图片大小（background-size优化Sprites图显示）

yanbingyun1990 发布于2019-08-28 18:30 / 962人阅读

摘要：如图所示但是，给我的背景图片是这样的一张图，在我们的实例中我们使用底部菜单大小为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将值设置为。

在一个项目的开发过程中用到了css Sprite，有这样一个需求：目标样式大小是32px * 23px大小的图片作为图标。如图所示:

但是，给我的背景图片是这样的一张图，256px * 46px：

在我们的实例中,我们使用底部菜单大小32px * 23px.为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。

在最初的CSS样式中，background-position的属性值都不需要进行任何设置，因为他们的默认值都是“0”，如下所示：

.x-navbar [class^="x-icon-"] {
background-image: url(img/icon_navbar_new_year.png);
width: 32px;
height: 23px;
}

因此，最关键的问题是，我们怎么知道background-size属性值要设置为多少？

这里有一个公式：
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值

我们高分辨率下的图标是256px x 46px;
我们目标图像的宽度是“64px”；
我们Sprites图像的总宽度是“256px”

根据前面的公式可以得知
64/32 = 2
256/2 = 128
最后的一件事情。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。当然你也可以设置相的的值（设置background-sizer的宽度为auto，高度为具体值），但我发现设置宽度会比较容易。

.x-navbar [class^="x-icon-"] {
    background-size: 128px auto;
}

然后就是根据图片的位置坐标进行显示了：

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

这样就实现了图中的效果了！

专线服务服务器托管等比例缩放图片图片显示大小width html 图片等比例图片缩放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111279.html

你知道SVG Sprites是什么吗，还在用css sprite就太low了

摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...

fevin 2019-08-30 15:54 评论0 收藏0
雪碧图sprity 合并多图使用心得

摘要：介绍是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件，支持图，可以内嵌编码格式的图，支持不同的图片格式和有不同的图片引擎可以选择。介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件，支持retina图，可以内嵌base64 编码格式的图，支持不同的图片格式和有不同的图片引擎可以选择。sprity 的前身是css-sp...

vboy1010 2019-08-28 18:29 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

Benedict Evans 2019-08-21 10:44 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

wangjuntytl 2019-08-28 18:21 评论0 收藏0
img/background/iconfont---谁最适合你？

摘要：在所有的网站优化话题中，资源文件的压缩都是占很大比重的。像百度图片中的友情链接所使用的图片就是作为呈现的，并使用进行合并。可以减少请求，还可以配合离线存储做性能优化。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。前言第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng...

icyfire 2019-08-29 10:55 评论0 收藏0