如何将精灵表图像缩放到容器？答案

【问题标题】：How can I scale sprite sheet images to a container?如何将精灵表图像缩放到容器？
【发布时间】：2019-04-15 14:48:24
【问题描述】：

我有一个容器，其背景图像可以缩放到屏幕宽度，最大尺寸为 1400 像素。我想从精灵表中获取图标，并根据容器的缩放方式按比例缩放它们。

图标的大小以及图标在容器中的位置很重要。最大尺寸为 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/

【问题讨论】：

如果您希望图标在浏览器窗口变小时按比例缩小，请将其宽度和高度定义为百分比而不是像素值
你可能想看看Viewport-percentage lengths
我在使用视口长度方面取得了一些成功。在将左/上值从 % 切换为 vw 后，图标现在似乎垂直移动。但是图标仍然保持相同的大小。我尝试使用 % 或 vw 代替 px，但似乎没有任何效果。
实际上这似乎引入了一个新问题，所以仍然没有真正到达任何地方。我将继续研究视口百分比长度，但我们将不胜感激任何额外的帮助或示例。

标签： javascript html css responsive-design bootstrap-4

【解决方案1】：

您就快到了，只需要在% 中指定一些值。
全屏运行下面的sn-p并调整大小：

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

希望对你有帮助。

【讨论】：

这很有帮助！我希望你不介意我问几个问题，这样我才能完全理解发生了什么。如何保持图像的最大高度不大于其原始大小 520px？你是怎么得出我遗漏的百分比的？
@BrianHead，谢谢，我已经更新了我的答案。请在 CSS 中查看我的 cmets。