'Flip box image not displaying correctly when responsive

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>
htmlcssvue-componentresponsiveness


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3352133

Related Questions