如何让页面图片左侧锚定，与背景图保持相同边距适配不同屏幕尺寸

问题根因 #

你当前代码中.laurel类未设置定位属性，left: 0%配置不生效，同时图片嵌套在Bootstrap的container容器内，该容器本身带响应式左右内边距、居中宽度限制，导致图片对齐基准和满宽展示的背景图不一致。

方案1：不改动HTML结构，仅修改CSS #

直接覆盖现有.laurel样式，新增定位相关配置即可：

/* 给图片父容器加相对定位，作为图片定位的基准 */
.slider-invest .col-md-12 > div:has(.laurel) {
  position: relative;
}

.laurel {
  width: 38vw;
  height: auto;
  padding-top: 30px;
  /* 新增定位配置 */
  position: absolute;
  /* 15px为Bootstrap container默认左内边距，和你项目实际配置一致即可 */
  left: calc(50% - 50vw + 15px);
}

/* 小屏幕适配 */
@media (max-width: 767px) {
  .laurel {
    left: 15px;
  }
}

方案2：调整HTML结构，维护成本更低 #

把图片节点挪到container外部，直接以满宽的section作为定位基准，逻辑更简单：

修改后HTML结构 #

<section class="slider-invest {{ if .bg_overlay }}overly-invest{{ end }}" style="background-image: url('{{ .bg_image_slider | relURL }}');">
  <!-- 图片挪到section下第一层级 -->
  <img src="{{ .laurel | relURL }}" class="laurel" alt="Img">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="block">
          {{ with .heading }}<h1>{{ . | markdownify }}</h1>{{ end }}
          {{ with .summary1 }}<h3 class="invest-slider-text">{{ . | markdownify }}</h3>{{ end }}
          {{ with .summary2 }}<h3 class="invest-slider-text">{{ . | markdownify }}</h3>{{ end }}
          {{ with .summary3 }}<h3 class="invest-slider-text">{{ . | markdownify }}</h3>{{ end }}
          {{ with .summary4 }}<h3 class="invest-slider-text">{{ . | markdownify }}</h3>{{ end }}
          {{ with .summary5 }}<h3 class="invest-slider-text">{{ . | markdownify }}</h3>{{ end }}
        </div>
        <!-- 删掉原位置的img节点 -->
        {{ with .button }}
        {{ if .enable }}
        <a href="{{ .link | relLangURL }}" class="btn-invest btn btn-main animated fadeInUp">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>

对应CSS配置 #

.slider-invest {
  position: relative;
}
.laurel {
  width: 38vw;
  height: auto;
  position: absolute;
  /* 和section设置的左右内边距完全一致即可 */
  left: 15px;
  top: 30px;
  /* 避免被其他内容遮挡 */
  z-index: 1;
}

两种方案都能实现拉伸屏幕时，图片边距和背景图边距始终同步对齐的效果，优先推荐方案2。

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