CSS: 不用js自动判断grid中翻转卡片的高度

Question

我想使用 grid 连续显示两张翻转卡片。每张翻转卡片的正面应包含一个 方形图像 ，背面应包含一些文字。如何实现不必在 .flip-card css class 内指定任何高度？我希望翻转卡 自动将其高度调整为图像的宽度 ，这本身取决于 grid 中可用的整体 space（因此设备之间的变化）。目前我必须对高度进行硬编码才能使其工作。但是这就不可避免地导致翻页卡不是正方形而是长方形。有什么想法吗？

这是我的代码：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.flip-card {
    position: relative;
    background-color: transparent;
    width: 100%;
    height: 200px; /* This value should not be hard coded, but be set according to the width of the image which is determined by the grid. It should make the flip card a perfect square*/
    overflow: hidden;
    perspective: 1000px;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card: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 { 
      background-color: transparent;
  }
  
  .flip-card-back {
    background-color: red;
    transform: rotateY(180deg);
  }

<div class="grid-container">
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>
  
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

</div>

Answer 1

不要使用 position:absolute 来实现此目的。依靠 CSS 网格并将卡片的正面和背面都放在同一区域，以便它们在仍然处于流元素中时重叠，因此该区域将定义为最大高度：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.flip-card {
  overflow: hidden;
  perspective: 1000px;
}

.flip-card-inner {
  display: grid; /* here */
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.flip-card-front,
.flip-card-back {
  grid-area: 1/1; /*and here */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

img {
  max-width: 100%
}

<div class="grid-container">

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png">
      </div>
      <div class="flip-card-back">
        <p>
          Some Text
        </p>
      </div>
    </div>
  </div>

</div>

CSS: 不用js自动判断grid中翻转卡片的高度

CSS: Determine height of flip card in grid automatically without js

css

grid

height