Bootstrap 5 - 为不同的断点显示不同的响应图像

Question

我正在使用引导程序 5。我想使用img标签为移动/平板电脑/桌面显示不同的图像。我正在尝试使用此代码，但无法使用display引导程序框架的实用程序为包装器 div 正确设置断点。

如果可能，我想要三个图像标签，而不是三个不同的 div，它们占据窗口高度的 100%。

如果你看到代码，我有一种模式显示在背景图像的顶部，需要适合所有可用屏幕空间的每个断点。我试过img-fluid w-100 h-100上课，但结果不是很好，我无法裁剪背景。我在前端使用 vue，我不是前端开发人员。

谢谢你。

<template>
  <div class="container-fluid p-0">
    <div class="row m-0">
<!-- This div with the image needs to be displayed only on mobile sm breakpoint -->
      <div class="col-lg-12 d-md-none d-lg-none d-sm-block p-0">
        <img class="img-fluid w-100" src="@/assets/sm-background.png">   
      </div>
<!-- This div with the image needs to be displayed only on tablet md breakpoint -->
      <div class="col-lg-12 d-none d-sm-none d-lg-none d-md-block p-0">
        <img class="img-fluid w-100" src="@/assets/md-background.png">   
      </div>
<!-- This div with the image needs to be displayed only on desktop lg breakpoint -->
      <div class="col-lg-12 d-none d-sm-none d-md-none d-lg-block p-0">
        <img class="img-fluid w-100" src="@/assets/lg-background.png">   
      </div>

      <div class="col-sm-12 col-md-6 col-lg-6 mx-auto position-absolute" id="checkModal">
        <div class="card">
          <div class="card-body">
            <h4>Age verification required</h4>
            <p>...</p>
            
            <input type="date" class="form-control" v-model="birthDate" >
            
            <input type="passwrd" class="form-control" v-model="passwor" >

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

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      birthDate: '',
      password: ''
    }
  },
  mounted() {

  },
  methods: {
    unlockContent() {
      console.log(this.birthDate, this.password);
    }
  }
}
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#checkModal {
  top: 14%;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>

´``

Answer 1

_{注意：第 1 部分回答了原始问题（d-*用法），但不建议用于图像，因为浏览器可能会预加载隐藏图像。但是，d-*类对于通过断点显示其他元素仍然很有用。}

1.d-*班级

Bootstrap 类是移动优先的，所以我们不需要定义每个断点。我们在较小断点处定义的任何内容都将级联到较大的断点，直到被覆盖。

所以假设 OP 的设备定义，我们可以使用这些display类：

设备	屏幕尺寸	班级
移动的	下面可见 md	d-md-none
药片	仅在 md	d-none d-md-block d-lg-none
桌面	隐藏在下面 lg	d-none d-lg-block

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- visible below md -->
<img class="d-md-none img-fluid w-100" alt="mobile alt text" src="https://via.placeholder.com/600x50/8da0cb/000000?text=600x50+for+breakpoint+%3C=+sm">
<!-- visible only on md -->
<img class="d-none d-md-block d-lg-none img-fluid w-100" alt="tablet alt text" src="https://via.placeholder.com/900x75/fc8d62/000000?text=900x75+for+breakpoint+==+md">
<!-- hidden below lg -->
<img class="d-none d-lg-block img-fluid w-100" alt="desktop alt text" src="https://via.placeholder.com/1200x100/66c2a5/000000?text=1200x100+for+breakpoint+%3E=+lg">

隐藏元素的扩展备忘单：

SCREEN SIZE            CLASSES
---------------------------------------------------
hidden on all          d-none
hidden only on xs      d-none d-sm-block
hidden only on sm      d-sm-none d-md-block
hidden only on md      d-md-none d-lg-block
hidden only on lg      d-lg-none d-xl-block
hidden only on xl      d-xl-none d-xxl-block
hidden only on xxl     d-xxl-none
hidden below sm        d-none d-sm-block
hidden below md        d-none d-md-block
hidden below lg        d-none d-lg-block
hidden below xl        d-none d-xl-block
hidden below xxl       d-none d-xxl-block
---------------------------------------------------
visible on all         d-block
visible only on xs     d-block d-sm-none
visible only on sm     d-none d-sm-block d-md-none
visible only on md     d-none d-md-block d-lg-none
visible only on lg     d-none d-lg-block d-xl-none
visible only on xl     d-none d-xl-block d-xxl-none
visible only on xxl    d-none d-xxl-block
visible below sm       d-sm-none
visible below md       d-md-none
visible below lg       d-lg-none
visible below xl       d-xl-none
visible below xxl      d-xxl-none

2. <picture>元素（推荐用于图片）

用于预加载隐藏图像的浏览器行为随着时间的推移和浏览器之间的不一致。由于加载隐藏图像会影响页面加载时间，因此建议避免使用d-none图像的方法。

断点图像的最佳实践（又名“艺术指导”）：

1. <picture>与<source>以media字符串为条件的多个标签一起使用。

2. 由于 css 类在media字符串中不起作用，请使用引导程序的断点像素：

   断点	方面
   sm	?576px
   md	?768 像素
   lg	?992 像素
   xl	?1200 像素
   xxl	?1400 像素

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<picture>
  <!-- show this up to sm -->
  <source media="(max-width: 596px)" srcset="https://via.placeholder.com/600x50/8da0cb/000000?text=600x50+for+breakpoint+%3C=+sm">
  <!-- else show this up to md -->
  <source media="(max-width: 768px)" srcset="https://via.placeholder.com/900x75/fc8d62/000000?text=900x75+for+breakpoint+==+md">
  <!-- else show this -->
  <img class="img-fluid w-100" alt="alt text for all sources" src="https://via.placeholder.com/1200x100/66c2a5/000000?text=1200x100+for+breakpoint+%3E=+lg">
</picture>