Flip box image not displaying correctly when responsive - html

Question

I am using Vue (not that it matters as this is a CSS issue I'm sure).
I have 3 flip boxes, taken mostly from the w3schools instructions at https://www.w3schools.com/howto/howto_css_flip_box.asp and all works as expected on a Desktop screen.
However, on my phone the image doesn't fit the whole box, leaving a space at the bottom. I have added background-repeat: no-repeat; as otherwise the image starts to repeat to fill in the space
Edit: Adding the html as requested ion the comments:
<template>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>{{ frontText }}</h2>
</div>
<div class="flip-box-back">
<div class="opaque-box">
<p class="mt-3 ms-2">{{ backText }}</p>
<span v-html="url"></span>
</div>
</div>
</div>
</div>
</template>
Is there anything obvious from the css below?
Thanks
<style scoped>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
width: 300px;
height: 200px; /* 200 best for desktop but not mobile */
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
object-fit: fill;
}
.flip-box-front, .flip-box-back {
background-image: v-bind(backgroundImage);
position: absolute;
width: 100%;
height: 100%;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-size: 100%;
background-repeat: no-repeat;
}
.flip-box-back {
background-size: 100%;
background-repeat: no-repeat;
font-weight: 600;
transform: rotateX(180deg);
}
.opaque-box{
position: absolute;
background-image: v-bind(backgroundImage);
background-size: 100%;
background: rgba(0, 0, 0, 0.50);
height: 100%;
}
</style>

Answer 1

Having spent quite some time wrestling with this before posting I have now fixed it by adding background-size: cover;
So the CSS now looks like this:
<style scoped>
...
.flip-box-front {
background-size: 100%;
background-repeat: no-repeat;
background-size: cover; /* Added this */
}
.flip-box-back {
background-size: 100%;
background-repeat: no-repeat;
font-weight: 600;
transform: rotateX(180deg);
background-size: cover; /* Added this */
}
...
</style>