引导程序5-显示不同断点的不同响应图像

Question

我使用的是bootstrap 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-*类

引导类首先是移动的，所以我们不需要定义每个断点。无论我们在较小的断点处定义什么，都会级联到较大的断点，直到被覆盖。

因此，假设OP的设备定义，我们可以使用以下display类：

类别d-md-none下方可见上可见下方的桌面

设备	屏幕大小
mobile	在md
片剂	md>	d-none d-md-block d-lg-none
隐藏在lg	d-none d-lg-block