0 
<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 网格画廊，它将是灯箱/模式弹出窗口。所有图像的大小相同。有几个框只是翻转卡动画，我让它工作得很好 - 但是翻转卡 div 的高度总是比其他画廊项目大。如何使它们在所有设备上的高度相同？

4

1 回答 1

0

如果您希望所有图像的高度与图像的固定高度相同，并使用 object-fit=cover 将该宽度设为 100%。这是第一个解决方案第二个是：图像使用相同的高度和宽度（400 * 400）

于 2020-09-24T04:28:07.670 回答