如何将精灵表图像缩放到容器? [英] How can I scale sprite sheet images to a container?

问题描述

我有一个带有背景图像的容器，该图像可以缩放到屏幕的宽度，最大尺寸为1400像素.我想从Sprite工作表中获取图标，并根据容器的缩放比例来缩放它们.

I have a container with a background image that scales to the width of a screen, up to a maximum size of 1400px. I want to take icons from a sprite sheet and scale them proportionally to how the container is scaling.

图标的大小以及图标在容器中的位置很重要.最大尺寸为1400像素，一切都很棒.但是，当缩小时，我希望图标也缩小，并相对于容器的背景图像保持正确的位置.

The size of the icons, as well as the placement of the icons within the container are important. At the maximum size of 1400px, everything is great. But when scaling down, I want the icons to also scale down in size and keep the correct positioning relative to the background image of the container.

现在，图标不会随容器缩小: https://jsfiddle.net/KakeWalk/2hduxzLe/

Right now, the icons do not scale down with the container: 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:

To get the background-position percentages, I used a Responsive CSS Sprite Generator that gave me this 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/

I tried copy/pasting this code into my project and changing the classes to IDs and the other way around, but had no success. None of the many things I've tried have gotten me any closer to the goal than what I posted here: https://jsfiddle.net/KakeWalk/2hduxzLe/

推荐答案

您快到了，只需要在%中指定一些值即可.
全屏运行下面的代码片段并调整大小:

You were almost there, just need to specify some values in %.
Run the snippet below in fullscreen and resize:

.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>

希望有帮助.

这篇关于如何将精灵表图像缩放到容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！