1

Я хотел бы отобразить две флип-карты подряд с помощью grid.
Каждая из переворачиваемых карточек должна содержать изображение в квадрате на лицевой стороне и некоторый текст на оборотной стороне.
Как я могу добиться отсутствия необходимости указывать какую-либо высоту в классе css .flip-card?
Я хотел бы, чтобы флип-карта автоматически настраивала свою высоту в соответствии с шириной изображения, которая сама зависит от общего пространства, доступного в grid (и, следовательно, изменяется от устройства к устройству). На данный момент мне нужно жестко указать высоту, чтобы она работала. Но это неизбежно приводит к тому, что флип-карта становится не квадратом, а прямоугольником.
Как добиться этого?

Здесь мой код:

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

Свободный перевод вопроса CSS: Determine height of flip card in grid automatically without js от участника @Jonathan Rhein.

1

1 ответ 1

1

Не используйте для этого position: absolute. Положитесь на grid 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>

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.