Я хотел бы отобразить две флип-карты подряд с помощью 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.