Can anyone help me figure out how to make the purple box match the size of the background image in this screenshot using Bootstrap and its flex classes? I want it to maintain that size when resizing the screen.
If you'd like to try it out yourself, I've set up a Stackblitz environment for testing: https://stackblitz.com/edit/javascript-rs3ykl?file=index.html
https://i.sstatic.net/zhg4E.jpg
.page-container {
width: 100vw;
height: 50vh;
}
.background-image {
background: url('https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large') center center / contain no-repeat;
height: 100%;
width: auto;
background-origin: content-box;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
<div class="row w-100 h-100">
<div class="col-4 bg-primary">
<p>Box 1</p>
</div>
<div class="col-4">
<div class="background-image">
<div style="background: purple">
<div class="d-flex justify-content-around" style="color: rgb(255, 255, 255)">
<div class="d-flex flex-column">
<div>Tage</div>
<div>16086</div>
</div>
<div class="d-flex flex-column">
<div>Stunden</div>
<div>6</div>
</div>
<div class="d-flex flex-column">
<div>Minuten</div>
<div>13</div>
</div>
<div class="d-flex flex-column">
<div>Sekunden</div>
<div>34</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 bg-secondary">
<p>Box 3</p>
</div>
</div>
</div>