Using Bootstrap 5, I am attempting to utilize an img tag to showcase a different image depending on the device - mobile, tablet, or desktop. However, I am facing challenges in correctly setting the breakpoints for the wrapper divs using the display utilities provided by the Bootstrap framework.
Is it feasible to have three image tags instead of distinct divs occupying 100% of the window height?
Inspecting the code, I have a modal of sorts that needs to overlay the background image seamlessly across various breakpoints. While I have experimented with classes like img-fluid w-100 h-100, the results are not optimal and cropping the background image is proving to be difficult. Since I am not primarily a front-end developer and am working on the front-end using Vue, any guidance would be appreciated.
Thank you.
<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>