响应时翻转框图像无法正确显示

Question

我正在使用 Vue（这并不重要，因为我敢肯定这是一个 CSS 问题）。我有 3 个翻盖盒，主要取自 https://www.w3schools.com/howto/howto_css_flip_box.asp 的 w3schools 说明，并且在桌面屏幕上都按预期工作。但是，在我的 phone 上，图像不适合整个框，在底部留下一个 space。我添加了 background-repeat: no-repeat; 否则图像开始重复填充 space

编辑：根据评论的要求添加html：

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

下面的 css 有什么明显的吗？谢谢

<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

在发布之前我花了很多时间来解决这个问题，现在我已经通过添加 background-size: cover;

来修复它

所以 CSS 现在看起来像这样：

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

响应时翻转框图像无法正确显示

Flip box image not displaying correctly when responsive

html

css

responsiveness

vue-component