翻转卡的高度和宽度与Bootstrap 4 Grid Gallery的其余部分相同

问题描述

<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的高度总是比其他画廊项目大。如何在所有设备上使它们具有相同的高度？

解决方法

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