如何在小屏幕尺寸下实现图片居中的响应式布局？

1. 调整列布局实现响应式对齐 #

修改图片所在的列，添加偏移类让它在小屏/中屏居中，大屏时自动右对齐：

<div class="col-10 col-sm-8 col-lg-6 offset-1 offset-sm-2 d-lg-flex justify-content-end">

• offset-1 offset-sm-2：小屏（xs）和中屏（sm）时，通过左侧偏移让列占满12格并居中
• d-lg-flex justify-content-end：大屏（lg及以上）时，把列转为flex容器，让内部图片靠右对齐

2. 移除固定高度并优化图片类 #

修改图片的属性和class，让它自适应高度并适配布局：

<img src="./images/iphone.png" class="heading-image d-block img-fluid mt-5" alt="Bootstrap Themes" loading="lazy">

• 删掉height="200"：取消固定高度，让图片按自身比例自适应，占据更多垂直空间
• 移除mx-lg-auto：避免大屏时图片居中，改为通过列的布局控制右对齐
• 保留img-fluid：确保图片在所有屏幕尺寸下自适应宽度

3. 可选：自定义图片最小高度（按需调整） #

如果希望小屏时图片有固定的最小高度，可添加CSS：

.heading-image {
  min-height: 300px; /* 根据需求修改数值 */
  object-fit: contain; /* 保持图片比例不变 */
}

修改后的完整标题区域代码 #

<section id="title" class="gradient-background">
  <div class="container col-xxl-8 px-4 py-0">
    <div class="row flex-lg-row-reverse align-items-center g-1 py-0 pt-5">
      <div class="col-10 col-sm-8 col-lg-6 offset-1 offset-sm-2 d-lg-flex justify-content-end">
        <img src="./images/iphone.png" class="heading-image d-block img-fluid mt-5" alt="Bootstrap Themes" loading="lazy">
      </div>
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold text-body-emphasis lh-1 mt-5">Meet new and interesting dogs nearby.</h1>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
          <button type="button" class="btn btn-light btn-lg px-4 me-md-2 mt-3"> 
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-apple mb-1" viewBox="0 0 16 16"> <path 
              d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
              <path
              d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
            </svg>
            Download
          </button>

          <button type="button" class="btn btn-outline-light btn-lg px-4 mt-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
              class="bi bi-google-play mb-1" viewBox="0 0 16 16"><path
                d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" />
            </svg>
            Download
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

为什么之前的尝试无效？ #

• mx-lg-auto仅对大屏（lg及以上）生效，小屏时没有自动边距，导致图片偏左
• text-center针对行内元素生效，而图片是块级元素，需要通过列偏移或容器布局来控制居中，不能直接用该类实现块级元素的居中

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