Блог

 <style>

flip-card-container {
  width: 400px;
  height: 400px;
  perspective: 1000px;
}
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}
.flip-card-container:hover .flip-card {
  transform: rotateY(180deg); /* <=>  rotateY(.5turn) */
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 0.5rem; */
}
.flip-card-front {
  background-color: #333;
  color: #fff;
}
.flip-card-back {
  background-color: #517fa4;
  color: #fff;
  transform: rotateY(180deg);
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  /* border-radius: 0.5rem; */
}
.flip-card-back p {
  text-align: center;
  margin: 1rem;
  font-size: 1.4rem;
  line-height: 1.5rem;
}
.flip-card-back p span {
  display: block;
  font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  margin-top: 1.25rem;
}  

</style>

<div class="container-fluid">
    
    <div class="row">
<div class="col-lg-3 col-md-6 col-sml-12 funFact">
        <div class="flip-card-container mb-4 h-100 sup">
        
            <div class="flip-card">
              <div class="flip-card-front">
                <img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg" alt="Albert Einstein">
              </div>
              <div class="flip-card-back">
                <p>
                  "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe."
                  <span>- Albert Einstein -</span>
                </p>
              </div>
            
          </div>
    </div>
    </div>
          
        
          
          
    <div class="col-lg-3 col-md-6 col-sml-12" data-tilt>
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid" src="https://source.unsplash.com/2gYsZUmockw/400x400" alt="">
          </a>
    </div>
          
    <div class="col-lg-3 col-md-6 col-sml-12 data-tilt">
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid" src="https://source.unsplash.com/EMSDtjVHdQ8/400x400" alt="">
          </a>
    </div>
     <div class="col-lg-3 col-md-6 col-sml-12" data-tilt>
      <a href="#" class="d-block mb-4 h-100">
            <img class="img-fluid" src="https://source.unsplash.com/8mUEy0ABdNE/400x400" alt="">
          </a>
    </div>
  

У меня есть галерея с сеткой Bootstrap 4, которая будет представлять собой всплывающие окна lightbox / modal. Все изображения имеют одинаковый размер. Несколько блоков будут просто анимацией флип-карты, у меня это хорошо работает, но высота div флип-карты всегда больше, чем у других элементов галереи. Как я могу сделать их одинаковой высоты на всех устройствах?

если вы хотите, чтобы все изображения имели одинаковую высоту, чем фиксировать высоту изображений и придать этой ширине 100% с помощью object-fit= cover . это первое решение, второе: изображение использует ту же высоту и ширину (400 * 400)