我正在使用Bootstrap 5。我想使用
如果可能的话，我想要三个图像标签，而不是三个不同的占据窗口高度100%的div。
如果您查看代码，我有一种模态来在背景图像的顶部显示，需要适合每个断点的所有可用屏幕空间。我已经尝试了
谢谢。
img标签在移动设备/平板电脑/桌面上显示不同的图片。我尝试了以下代码，但是我无法正确设置包装器div的断点，使用Bootstrap框架的display实用工具。如果可能的话，我想要三个图像标签，而不是三个不同的占据窗口高度100%的div。
如果您查看代码，我有一种模态来在背景图像的顶部显示，需要适合每个断点的所有可用屏幕空间。我已经尝试了
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>
´``