I am currently in the process of trying to center the text "WHAT" over the image in col-2.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
While resizing the browser, I want to ensure that the row height changes to accommodate the content in col-10. I am currently using object-fit:contain to maintain the correct image proportions. It is crucial for me to have the "stack-Txt" div resize along with the image to ensure the text remains centered over the image.
If you have any alternative methods to achieve this, please feel free to suggest.
One proposed solution involves placing the text "WHAT" in another child div, using flex properties to center the text with justify-content/align-items, and adding a window resize event listener in JavaScript to set the size of the next sibling div equal to the image.
While the provided CSS classes were utilized at some point, the most important aspect is to prevent the image from overflowing col-2 or the height, which varies based on the length of col-10.
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Please note that there are also media queries implemented to resize text, but this should not affect the functionality.