如何仅使用CSS创建响应性翻转卡？

我正在使用一些我在野外发现的CSS来制作翻转卡片。我已经做了一些调整，试图使它们具有流畅的响应能力。我的尝试是：

css:

html

无名氏
建筑师和工程师

我们爱那个家伙

---

我希望发生的是，如果我调整翻转卡片包装的宽度，内容将相对于该宽度扩展，翻转将继续。然而，只有当我还提供翻转卡片包装的高度时，它才起作用。因为前面和后面都是绝对的，我不能有一个高度来冒泡。有什么想法吗？

保持卡片高度响应的一种可能性是在

翻转卡片内部

类上设置

填充底部

或

填充顶部

。由于使用百分比时，这些高度基于父对象的宽度，

填充底部：100%应该创建一个完美的正方形。如果你想在尺寸方面做些什么，下面是纵横比框的一个很好的概述

    .flip-card-wrapper {
    width: 50%;
 height: auto;

}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card img {
        width: 100%;
        height: auto;
    }

.flip-card-inner {
  position: relative;
    width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}

.flip-card-wrapper:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {

  color: black;
}

.flip-card-back {
  background-color: #c1272d;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card-wrapper" >
  <div class="flip-card" >
    <div class="flip-card-inner">

      <div class="flip-card-front">
        <img src="https://dummyimage.com/600x600/000/fff" alt="Avatar" >
      </div>
      <div class="flip-card-back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>