I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specified height in .hero.
I have ensured that everything is using border-box and I am utilizing TailwindCSS. Is there a crucial detail that I might be missing? Could it be that border-box is not functioning as intended?
Vue file
<template>
<div class="hero grid grid-cols-12">
<div class="hero-left col-span-5 grid-cols-12">
<div class="hero-left-top col-span-12">
<h1>Let's start something big together.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. consectetur
adipisicing elit
</p>
<div class="bottom">
<a class="btn" href="">Register</a>
</div>
</div>
<div class="hero-left-bottom mt-10 col-span-12 grid gap-9 grid-cols-12">
<div class="col-span-4">
<h2>30+</h2>
<p>Years of Excellence</p>
</div>
<div class="col-span-4">
<h2>30+</h2>
<p>Years of Excellence</p>
</div>
<div class="col-span-4">
<h2>30+</h2>
<p>Years of Excellence</p>
</div>
</div>
</div>
<div class="hero-right col-span-7">
<img class="" src="/imgs/businessman.jpg" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "Hero",
components: {},
};
</script>
<style lang="scss" scoped>
@import "../../../sass/app.scss";
.hero {
margin: 50px 0;
padding: 0 $padding;
height: 900px;
background: red;
&-left {
&-top {
.bottom {
height: 60px;
display: flex;
align-items: center;
}
p {
margin: 30px 0;
}
.btn {
height: auto;
background: $purple;
padding: 15px 50px;
font-size: 20px;
font-weight: 700;
color: white;
}
}
}
&-right {
height: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
img {
height: 100%;
width: 100%;
}
}
}
</style>
Global SCSS file
* {
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif !important;
}