如何将Sprite背景图适配到容器内且不扩大容器尺寸？

我有一张包含两张图片的Sprite图，但其尺寸始终大于父容器。希望将该Sprite背景图适配到父容器中，且不增大父容器的尺寸，该如何实现？

原始代码 #

HTML

<body>
<div><span class="affiliate-sprite-60"></span></div>
<div><span class="affiliate-sprite-40"></span></div>
</body>

CSS

.affiliate-sprite-60
{
background:url('affiliate-sprite.jpg') 0px -1px;
width:799px;height:440px;
display:inline-block;
}

.affiliate-sprite-40
{
background:url('affiliate-sprite.jpg') -799px -0px;
width:783px;height:441px;
display:inline-block;
}
div {
width: 600px;
border: 2px solid red;
}

原始Sprite图：

解决方法 #

核心思路是让Sprite图的目标区域适配父容器尺寸，同时保持原图比例，通过调整CSS的background-size、background-position和元素尺寸实现：

修改后的CSS代码：

div {
  width: 600px;
  border: 2px solid red;
}

.affiliate-sprite-60, .affiliate-sprite-40 {
  display: block;
  width: 100%; /* 占满父容器宽度 */
  background-image: url('affiliate-sprite.jpg');
  background-repeat: no-repeat;
}

.affiliate-sprite-60 {
  /* 保持原始图799x440的宽高比 */
  aspect-ratio: 799/440;
  /* 总Sprite宽度为799+783=1582px，缩放至当前元素宽度的1.98倍，确保目标区域填满容器 */
  background-size: 198% auto;
  /* 定位到Sprite中第一个图的位置 */
  background-position: 0 0;
}

.affiliate-sprite-40 {
  /* 保持原始图783x441的宽高比 */
  aspect-ratio: 783/441;
  /* 总Sprite宽度1582px，缩放至当前元素宽度的2.02倍 */
  background-size: 202% auto;
  /* 向左偏移100%，定位到Sprite中第二个图的位置 */
  background-position: -100% 0;
}

关键说明 #

• width:100%让元素占满父容器宽度，aspect-ratio确保元素高度和原始Sprite图区域的宽高比一致，避免拉伸变形
• background-size按总Sprite宽度与目标区域宽度的比例设置，保证目标区域正好填满元素
• background-position用百分比定位，精准显示Sprite中对应的图片区域

内容的提问来源于stack exchange，提问作者Amin