Bootstrap 4：图片文本在不同屏幕尺寸下偏移的技术求助

嘿，我碰到过一模一样的问题！你现在用position: absolute定位文本但缩放偏移的核心原因是——如果用固定的px值来设置left/top，图片尺寸变化时文本的相对位置肯定会乱。试试下面这几个方案，都是基于你现有代码修改，能让文本跟着图片比例自适应，完美避开图里的手机：

方案1：百分比定位 + Transform（最直接的修改） #

这个方法把文本的定位改成相对容器的百分比，再用transform做垂直对齐，不管图片怎么缩放，文本都会牢牢保持相对位置：

<section>
  <div class="col-lg-12" style="margin: 0; padding: 0; position: relative;">
    <img class="img-fluid" src="你的图片地址" alt="图片描述">
    <!-- 要偏移的文本 -->
    <div class="overlay-text" style="position: absolute; 
        left: 15%; /* 按需调整：手机在右侧就设小一点，左侧就改成right:15% */
        top: 50%; 
        transform: translateY(-50%); /* 这是*垂直居中的标准写法*，比margin-top靠谱 */
        color: #fff; /* 可选：加个显眼的颜色确保文本在图片上可见 */
        z-index: 1; /* 必须加！确保文本叠在图片上方 */">
      你的文本内容
    </div>
  </div>
</section>

为什么这招管用？ #

• left: 15%是相对于父容器（也就是图片的容器，img-fluid会占满容器宽度）的百分比，图片缩放时这个比例会自动适配。
• top: 50%加transform: translateY(-50%)能让文本完美垂直居中，不会因为文本高度变化而偏移，比固定margin-top灵活太多。

方案2：CSS Grid布局（更简洁的现代写法） #

如果你不想折腾position，可以试试Grid布局——把图片和文本塞进同一个网格单元格，用Grid的对齐属性直接定位，响应式表现更稳定：

<section>
  <div class="col-lg-12" style="margin: 0; padding: 0; display: grid;">
    <img class="img-fluid" src="你的图片地址" alt="图片描述" style="grid-column: 1 / -1; grid-row: 1 / -1;">
    <div class="overlay-text" style="grid-column: 1 / -1; grid-row: 1 / -1;
        justify-self: start; /* 文本靠左，要靠右就换成end */
        align-self: center; /* 一键垂直居中 */
        margin-left: 15%; /* 同样用百分比调整避开手机 */
        color: #fff;
        z-index: 1;">
      你的文本内容
    </div>
  </div>
</section>

优势： #

• 不用写一堆position属性，代码更干净，Grid会自动把文本叠在图片上方。
• justify-self和align-self比手动调left/top直观太多，后期维护起来更省心。

方案3：背景图片法（适合固定比例的图片） #

如果你的图片有固定宽高比（比如常见的16:9），可以把图片设为容器的背景，用padding-top维持比例，文本直接放在容器里：

<section>
  <div class="col-lg-12" style="margin: 0; padding: 0;
        background-image: url('你的图片地址');
        background-size: cover; /* 让背景图片铺满容器 */
        background-position: center; /* 图片居中显示 */
        padding-top: 56.25%; /* 16:9比例的计算：9÷16×100%=56.25%，其他比例自己算 */
        position: relative;">
    <div class="overlay-text" style="position: absolute;
        top: 50%;
        left: 15%;
        transform: translateY(-50%);
        color: #fff;
        z-index: 1;">
      你的文本内容
    </div>
  </div>
</section>

适用场景： #

• 当你需要确保图片不会被拉伸变形，始终保持固定比例时，这个方法特别实用。

最后小提醒： #

不管用哪个方案，记得根据图片里手机的位置灵活调整left/right的百分比——比如手机在右侧就把left设为10%-20%，手机在左侧就用right:10%-20%，同时给文本加text-align:right就行！

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