Bootstrap 5如何为移动/平板/桌面断点配置对应展示图片

核心调整点 #

• 直接将Bootstrap 5响应式显示类绑定在<img>标签上，完全移除每张图外层不必要的包裹div，满足直接使用3个img标签、不嵌套独立占高容器的需求
• 简化冗余的断点判断逻辑：替换原来堆叠写法的d-*-none/d-*-block类，按照Bootstrap 5默认断点规则简化组合，避免出现断点切换错位的问题
• 解决图片拉伸、无法智能裁剪的问题：不再单纯依赖img-fluid w-100 h-100的基础样式，配合内置的object-fit-cover工具类，实现图片铺满全屏、保持原比例裁剪多余区域的效果
• 修正定位基准：给最外层容器补全相对定位、全视口最小高度，解决上层验证卡片定位偏移的问题
• 修正原代码笔误：将写错的输入框类型passwrd改为正确的password，将和data定义不一致的绑定变量passwor改为password，保证双向绑定正常生效

修改后的完整组件代码 #

<template>
  <div class="container-fluid p-0 position-relative overflow-hidden" style="min-height: 100vh;">
    <!-- 移动端（<md）显示 -->
    <img 
      src="@/assets/sm-background.png" 
      class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover d-md-none"
      alt="移动端背景"
    >
    <!-- 平板端（md - lg）显示 -->
    <img 
      src="@/assets/md-background.png" 
      class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover d-none d-md-block d-lg-none"
      alt="平板端背景"
    >
    <!-- 桌面端（lg 及以上）显示 -->
    <img 
      src="@/assets/lg-background.png" 
      class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover d-none d-lg-block"
      alt="桌面端背景"
    >

    <!-- 上层验证内容层 -->
    <div class="col-sm-10 col-md-6 col-lg-4 mx-auto" id="checkModal" style="z-index: 2; padding-top: 15vh;">
      <div class="card shadow">
        <div class="card-body">
          <h4>Age verification required</h4>
          <p>...</p>
          
          <input type="date" class="form-control mb-3" v-model="birthDate">
          <input type="password" class="form-control mb-3" v-model="password">

          <button class="btn btn-primary w-100" @click.prevent="unlockContent()">Conferma</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      birthDate: '',
      password: ''
    }
  },
  methods: {
    unlockContent() {
      console.log(this.birthDate, this.password);
    }
  }
}
</script>

<style>
/* 原有自定义样式可按需保留，不需要额外写固定top偏移 */
</style>

补充说明 #

• 所有图片采用绝对定位铺满最外层容器，上层内容层使用常规文档流定位，不需要硬卡固定的top值，天然适配所有屏幕尺寸
• object-fit-cover是Bootstrap 5 2.1版本后内置的工具类，如果你的项目版本较低，可以在style里补一句.object-fit-cover { object-fit: cover; }实现相同效果
• 最外层加overflow-hidden，避免绝对定位的图片溢出容器产生横向滚动条

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