Html 在具有动态宽度的div元素上匹配背景图像

如果我们为div指定了一个背景位置，那么如何使div 100%适合其容器并保持相同的背景图像

CSS

#content {
    position: relative;
    max-width: 50%;
    height: 0;
    padding: 0 0 50% 0;
}
.icon-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; 
   background: url( "/path/to/my/image.png" ) no-repeat -50px -50px;
  /*
  -50px -50px is corresponding to letter "D" in the image
  */
 }

HTML文件

<div id='content'>
   <div class='icon-1'>
   </div>
</div>

---

您只需调整背景值即可。在您的情况下，它应该是红色框大小的2倍，然后将位置调整到底部/右侧，以显示

D

，顶部/左侧显示

A

，依此类推：

#内容{
位置：相对位置；
最大宽度：50%；
身高：0；
边距：0自动0自动；
填充：0 50%0；
}
.icon-1{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：url（“https://i.stack.imgur.com/4FzW2.png）右下角/200%200%无重复；
}

你是说你想让D适合所有的红色方块？是的，这就是我想要的。有可能吗？这就是我想要的。我会把大约20个图像放在一个单格文件中，并用百分比播放。谢谢