![](/img/trans.png)
[英]How can I scale/stretch/skew a sprite from a sprite sheet with javascript?
[英]How can I scale sprite sheet images to a container?
我有一个带有背景图像的容器,该图像可缩放到屏幕的宽度,最大尺寸为1400px。 我想从Sprite工作表中获取图标,并根据容器的缩放比例来按比例缩放它们。
图标的大小以及图标在容器中的位置都很重要。 最大尺寸为1400像素,一切都很好。 但是,当缩小时,我希望图标也缩小,并相对于容器的背景图像保持正确的位置。
现在,图标不会随容器缩小: https : //jsfiddle.net/KakeWalk/2hduxzLe/
HTML:
<div class="container-fluid striped-background">
<div id="blue-section">
<div id="AAAA"></div>
<div id="BBBB"></div>
<div id="CCCC"></div>
<div id="DDDD"></div>
<div id="EEEE"></div>
<div id="FFFF"></div>
<div id="GGGG"></div>
<div id="HHHH"></div>
<div id="IIII"></div>
<div id="JJJJ"></div>
<div id="KKKK"></div>
<div id="LLLL"></div>
<div id="MMMM"></div>
<div id="NNNN"></div>
<div id="OOOO"></div>
<div id="PPPP"></div>
<div id="QQQQ"></div>
<div id="RRRR"></div>
<div id="SSSS"></div>
</div>
</div>
CSS:
.striped-background {
background-image: url("https://imgur.com/7sSDRKV.png");
background-repeat: no-repeat;
max-width: 1400px;
height: 520px;
background-size: 100%;
position: relative;
}
#blue-section div {
height: 92px;
width: 92px;
margin: 0;
padding: 0;
position: absolute;
cursor: pointer;
display: block;
}
#AAAA {
left: 4.5%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 0.476190%;
}
#BBBB {
left: 15.05%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 0.476190%;
}
#CCCC {
left: 36.16%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 0.476190%;
}
#DDDD {
left: 46.72%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 0.476190%;
}
#EEEE {
left: 9.77%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 0.476190%;
}
#FFFF {
left: 20.33%;
top: 50%;
background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 22.8571%;
}
#GGGG {
left: 20.33%;
top: 80%;
background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 22.8571%;
}
#HHHH {
left: 30.88%;
top: 40%;
background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 22.8571%;
}
#IIII {
left: 30.88%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 22.8571%;
}
#JJJJ {
left: 41.44%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 22.8571%;
}
#KKKK {
left: 57.27%;
top: 30%;
background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 45.2381%;
}
#LLLL {
left: 57.27%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 45.2381%;
}
#MMMM {
left: 78.38%;
top: 40%;
background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 45.2381%;
}
#NNNN {
left: 67.83%;
top: 40%;
background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 45.2381%;
}
#OOOO {
left: 73.11%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 90.0000% 45.2381%;
}
#PPPP {
left: 83.66%;
top: 15%;
background: url("https://imgur.com/8L1Y4SS.png") 0.476190% 67.6190%;
}
#QQQQ {
left: 88.94%;
top: 40%;
background: url("https://imgur.com/8L1Y4SS.png") 22.8571% 67.6190%;
}
#RRRR {
left: 83.66%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 45.2381% 67.6190%;
}
#SSSS {
left: 73.11%;
top: 65%;
background: url("https://imgur.com/8L1Y4SS.png") 67.6190% 67.6190%;
}
为了获得背景位置百分比,我使用了响应式CSS Sprite Generator,它为我提供了以下CSS:
/*
Responsive CSS Sprite created using: https://responsive-css.us/
*/
.AAAA, .BBBB, .CCCC, .DDDD, .EEEE, .FFFF, .GGGG, .HHHH, .IIII, .JJJJ, .KKKK, .LLLL, .MMMM, .NNNN, .OOOO, .PPPP, .QQQQ, .RRRR, .SSSS
{display:inline-block; overflow:hidden; background-repeat: no-repeat;
background-image:url(sprite.png);}
.AAAA {width: 92px; height: 92px; background-position: 0.476190% 0.476190%; background-size: 556.522%; }
.BBBB {width: 92px; height: 92px; background-position: 22.8571% 0.476190%; background-size: 556.522%; }
.CCCC {width: 92px; height: 92px; background-position: 45.2381% 0.476190%; background-size: 556.522%; }
.DDDD {width: 92px; height: 92px; background-position: 67.6190% 0.476190%; background-size: 556.522%; }
.EEEE {width: 92px; height: 92px; background-position: 90.0000% 0.476190%; background-size: 556.522%; }
.FFFF {width: 92px; height: 92px; background-position: 0.476190% 22.8571%; background-size: 556.522%; }
.GGGG {width: 92px; height: 92px; background-position: 22.8571% 22.8571%; background-size: 556.522%; }
.HHHH {width: 92px; height: 92px; background-position: 45.2381% 22.8571%; background-size: 556.522%; }
.IIII {width: 92px; height: 92px; background-position: 67.6190% 22.8571%; background-size: 556.522%; }
.JJJJ {width: 92px; height: 92px; background-position: 90.0000% 22.8571%; background-size: 556.522%; }
.KKKK {width: 92px; height: 92px; background-position: 0.476190% 45.2381%; background-size: 556.522%; }
.LLLL {width: 92px; height: 92px; background-position: 22.8571% 45.2381%; background-size: 556.522%; }
.MMMM {width: 92px; height: 92px; background-position: 45.2381% 45.2381%; background-size: 556.522%; }
.NNNN {width: 92px; height: 92px; background-position: 67.6190% 45.2381%; background-size: 556.522%; }
.OOOO {width: 92px; height: 92px; background-position: 90.0000% 45.2381%; background-size: 556.522%; }
.PPPP {width: 92px; height: 92px; background-position: 0.476190% 67.6190%; background-size: 556.522%; }
.QQQQ {width: 92px; height: 92px; background-position: 22.8571% 67.6190%; background-size: 556.522%; }
.RRRR {width: 92px; height: 92px; background-position: 45.2381% 67.6190%; background-size: 556.522%; }
.SSSS {width: 92px; height: 92px; background-position: 67.6190% 67.6190%; background-size: 556.522%; }
我尝试将此代码复制/粘贴到我的项目中,并将类更改为ID,反之亦然,但没有成功。 我尝试过的许多事情都没有比我在这里发布的内容更接近目标了: https : //jsfiddle.net/KakeWalk/2hduxzLe/
您快到了,只需要在%
指定一些值即可。
全屏运行下面的代码片段并调整大小:
.striped-background { position: relative; max-width: 1400px; padding: 37.143% 0 0; /* 520px is 37.143% from 1400px so we keep the aspect ratio */ background: url("https://imgur.com/7sSDRKV.png") no-repeat 0 0 / cover; } #blue-section div { position: absolute; width: 6.6%; /* 92px is 6.6% from 1400px */ padding: 6.6% 0 0; cursor: pointer; background-image: url("https://imgur.com/8L1Y4SS.png"); background-size: 556.522%; /* the width of your sprite is 512px where 460px for 5 symbols (92px each) and the rest of the space is for unnecessary extra space. So if there was no extra space, background-size would be 500% (100% for 5 symbols) but we have to multiply this number to 512/460 what gives us 556.522% */ } #AAAA { left: 4.5%; top: 15%; background-position: 0.476190% 0.476190%; } #BBBB { left: 15.05%; top: 15%; background-position: 22.8571% 0.476190%; } #CCCC { left: 36.16%; top: 15%; background-position: 45.2381% 0.476190%; } #DDDD { left: 46.72%; top: 15%; background-position: 67.6190% 0.476190%; } #EEEE { left: 9.77%; top: 65%; background-position: 90.0000% 0.476190%; } #FFFF { left: 20.33%; top: 50%; background-position: 0.476190% 22.8571%; } #GGGG { left: 20.33%; top: 80%; background-position: 22.8571% 22.8571%; } #HHHH { left: 30.88%; top: 40%; background-position: 45.2381% 22.8571%; } #IIII { left: 30.88%; top: 65%; background-position: 67.6190% 22.8571%; } #JJJJ { left: 41.44%; top: 65%; background-position: 90.0000% 22.8571%; } #KKKK { left: 57.27%; top: 30%; background-position: 0.476190% 45.2381%; } #LLLL { left: 57.27%; top: 65%; background-position: 22.8571% 45.2381%; } #MMMM { left: 78.38%; top: 40%; background-position: 45.2381% 45.2381%; } #NNNN { left: 67.83%; top: 40%; background-position: 67.6190% 45.2381%; } #OOOO { left: 73.11%; top: 15%; background-position: 90.0000% 45.2381%; } #PPPP { left: 83.66%; top: 15%; background-position: 0.476190% 67.6190%; } #QQQQ { left: 88.94%; top: 40%; background-position: 22.8571% 67.6190%; } #RRRR { left: 83.66%; top: 65%; background-position: 45.2381% 67.6190%; } #SSSS { left: 73.11%; top: 65%; background-position: 67.6190% 67.6190%; }
<div class="container-fluid striped-background"> <div id="blue-section"> <div id="AAAA"></div> <div id="BBBB"></div> <div id="CCCC"></div> <div id="DDDD"></div> <div id="EEEE"></div> <div id="FFFF"></div> <div id="GGGG"></div> <div id="HHHH"></div> <div id="IIII"></div> <div id="JJJJ"></div> <div id="KKKK"></div> <div id="LLLL"></div> <div id="MMMM"></div> <div id="NNNN"></div> <div id="OOOO"></div> <div id="PPPP"></div> <div id="QQQQ"></div> <div id="RRRR"></div> <div id="SSSS"></div> </div> </div>
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.