使用Bootstrap固定带背景图的div尺寸，避免浏览器缩放时改变

嘿，我完全懂你遇到的麻烦——调整浏览器窗口大小的时候，带背景图的div1尺寸跟着变，里面的拖拽子元素位置也跑偏了，这对拖拽功能来说确实很影响体验。咱们来一步步搞定这个问题：

问题根源分析 #

目前你的代码有两个核心问题：

1. .myNewDivHeight只设置了min-height，没有固定宽度，窗口缩放时div的宽高比例会乱掉；
2. 子元素.hsonuc用了绝对定位，但父元素div1没有设置position: relative，导致子元素的定位参考是整个文档，而不是它的父容器，窗口一变就错位。

具体解决方案 #

修改你的CSS代码，让div1固定尺寸（或维持宽高比），同时让子元素的定位基于父容器：

/* 固定div1的基础尺寸，设置相对定位作为子元素的定位基准 */
#div1.myNewDivHeight {
  /* 根据你的背景图实际尺寸设置宽高，这里假设背景图是800x390 */
  width: 800px;
  height: 390px;
  position: relative;
  margin: 0 auto; /* 可选：让div在页面中居中 */
  background-image: url('你的背景图路径'); /* 确保背景图正确引入 */
  background-size: cover; /* 背景图适配div尺寸，不变形 */
  background-position: center;
}

/* 调整子元素定位，基于父容器的相对定位计算位置 */
.hsonuc {
  position: absolute;
  background-color: white;
  top: 72%;
  /* 替换原来的right和margin-right，改为相对于父元素中心的偏移 */
  left: calc(50% - 200px);
}

/* 小屏幕适配：维持宽高比，避免背景图变形 */
@media screen and (max-width: 800px) {
  #div1.myNewDivHeight {
    width: 100%;
    height: auto;
    /* 用padding-top维持宽高比：390/800 = 48.75% */
    padding-top: 48.75%;
  }
  
  .hsonuc {
    /* 小屏幕上调整偏移量，确保位置合理 */
    left: calc(50% - 150px);
    transform: translateX(-50%); /* 辅助居中对齐 */
  }
}

关键修改点说明 #

• 固定父容器尺寸：给div1设置明确的宽高，搭配background-size: cover保证背景图始终适配容器，不会因为窗口缩放拉伸变形；
• 相对定位基准：父容器加position: relative，让子元素的绝对定位完全基于父容器，不再受窗口尺寸影响；
• 动态定位计算：用calc()计算子元素的水平位置，代替固定的margin-right，确保在父容器尺寸变化时（比如小屏幕适配），子元素的相对位置保持一致；
• 小屏幕宽高比维持：用padding-top的百分比值来模拟高度，这样div的高度会随宽度等比例变化，背景图不会变形，同时子元素的定位也能通过媒体查询适配。

这样调整后，不管怎么缩放浏览器窗口，div1的尺寸（或宽高比）都会保持稳定，拖拽的子元素也会一直固定在背景图的正确位置上啦！

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