如何让div占容器100%、适配动态宽度并保留指定背景定位的背景图？

Hey，我来帮你搞定这两个CSS布局问题，结合你给出的代码，我整理了具体的解决方案：

你现在的.icon-1用了固定像素的background-position，这在div宽度固定的时候没问题，但一旦#content的宽度动态变化（比如响应式场景），固定像素偏移就会让你想显示的字母D跑偏或者显示不全。要搞定这个，我们可以用相对单位或者calc()来替代固定像素，同时配合background-size来适配：

假设你的原始背景图image.png是200px×200px，字母D在左上角偏移-50px -50px的位置（也就是相对于原图的25%偏移量），可以这样修改CSS：

.icon-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/path/to/my/image.png") no-repeat;
  /* 用百分比替代固定像素，确保div宽度变化时，偏移比例一致 */
  background-position: -25% -25%;
  /* 放大背景图2倍，刚好能显示偏移后的目标区域 */
  background-size: 200%;
}

如果你必须保留固定像素的偏移值（比如不确定原图尺寸），可以用calc()结合百分比来实现适配：

.icon-1 {
  /* 其他属性不变 */
  background-position: calc(0% - 50px) calc(0% - 50px);
  /* 让背景图覆盖整个div，同时保留偏移 */
  background-size: cover;
}

这样不管#content的宽度怎么变，背景图里的字母D都能稳定显示在正确位置。

这里分两种场景，看你要让哪个div占满容器：

场景A：让#content占其父容器的100%宽度 #

你现在的#content设置了max-width:50%，只要把这个属性改成width:100%（或者max-width:100%，根据你的响应式需求选择），就能让它占满父容器的宽度：

#content {
  position: relative;
  width: 100%; /* 替换原来的max-width:50% */
  height: 0;
  padding: 0 0 50% 0; /* 维持1:1的宽高比不变 */
}

此时.icon-1已经是width:100% height:100%，会自动占满#content，你之前设置的background-position（不管是像素还是百分比）都会保留，配合调整好的background-size就能正常显示目标内容。

场景B：让.icon-1直接占最外层容器的100% #

如果要跳过#content，让.icon-1直接占最外层容器的100%，那需要调整它的定位和尺寸：

.icon-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 相对于父容器的100%，确保父容器是相对定位 */
  height: 50%; /* 对应原来的padding-top:50%，维持1:1宽高比 */
  background: url("/path/to/my/image.png") no-repeat -50px -50px;
  /* 同样用百分比或calc来适配动态尺寸 */
  background-position: -25% -25%;
  background-size: 200%;
}

⚠️ 注意：如果选择这种方式，一定要确保.icon-1的直接父容器设置了position: relative，否则它的绝对定位会相对于整个文档，导致布局错乱。

另外，不管哪种场景，都要确保背景图的background-repeat设置为no-repeat，避免重复显示影响效果。

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