Bootstrap Carousel 混合图像和 iframe - 大小不同

Question

我有一个来自 bootstrap 4.4 的轮播，并且有 2 张 jpg 图像，它们都可以正常工作，但我的第三个“图像”（3D 图像）需要是一个 iframe，它可以链接到一个有 360 度图像的网站。

我希望这个 iframe 与我之前的 2 个轮播图像具有相同的高度，并且具有响应性。我怎样才能做到这一点？ 我当前的代码如下所示：

<!-- Header Carousel -->
<header class="container-fluid">
  <div class="row">
    <div class="col-12 nomargin">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/pictures/_MG_9515_web.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/pictures/_MG_9629_web.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">

            <iframe class="embed-responsive" src="https://www.kijkrond.in/stationroeselare/" alt="...">
                        </iframe>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</header>

Answer 1

我一直在谷歌上搜索答案，我想出了一些简单的方法。感谢此博客上的解释：https://blog.theodo.com/2018/01/responsive-iframes-css-trick/。

我制作了一个与我用过的图片大小相同的空 png。在这个 png 中放一些文本，这样我就可以看到这是有效的。

我制作了一个 div，我在其中放入了 png。我给了 div 一个自制的 CSS 类 posRelative，它有 overlow: hidden;和位置：相对；

然后我在具有 posRelative 的同一个 div 中创建了 iframe。给 iframe 一个自制的 css 类 posAbsolute，它有： position:absolute;顶部：0；左：0；宽度：100%；高度：100%；边框：0；

所以我的 iframe 位于 png 的顶部并随它缩放...

这就像一个魅力:-)。

仍然非常感谢上面给出的解决方案。

.posRelative{
    position: relative;
    overflow: hidden;
}

.posAbsolute{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

<header class="container-fluid">
          <div class="row">
          <div class="col-12 nomargin">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                    <img src="img/pictures/_MG_9515_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                    <img src="img/pictures/_MG_9629_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <div class="posRelative">
                            <img src="img/pictures/Empty_web.png" class="d-block w-100" alt="...">
                        <iframe class="posAbsolute" src="https://www.kijkrond.in/stationroeselare/" alt="..." >
                        </iframe>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
          </div>
        </div>
      </header>

Answer 2

使用媒体查询为图片添加固定尺寸。我不建议在这里使用引导类，因为要创建响应式图像，因为它将创建响应式图像但具有动态大小，因此每个图像都有自己的大小，因此它会根据自己的大小调整自己的大小，即使他们会使用相同的类。因此，创建一个具有您想要使用的大小的类并创建媒体查询以使其具有响应性。像这样，我使用的是随机大小的 c。

.responsive-size {
  height: 500px;
  width: 700px;
  min-width: 100px;
  min-height: 100px;
}
@media (max-width:1000px) {
  .responsive-size {
    height: 300px;
    width: 500px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:800px) {
  .responsive-size {
    height: 200px;
    width: 400px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:700px) {
  .responsive-size {
    height: 150px;
    width: 350px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:500px) {
  .responsive-size {
    height: 100px;
    width: 250px;
  }
}
@media (max-width:300px) {
  .responsive-size {
    height: 50px;
    width: 100px;
  }
}

创建类后，将此类添加到您正在使用的所有图像和 iframe 中，如下所示：

<div class="carousel-inner container">
                <div class="carousel-item active">
                <img src="https://wallpapercave.com/wp/wp3654088.jpg" class="d-block responsive-size img-fluid" alt="..."/>
                </div>
                <div class="carousel-item">
                <img src="https://wallpapercave.com/wp/wp3654088.jpg" class="d-block responsive-size img-fluid" alt="..."/>
                </div>
                <div class="carousel-item">

                    <iframe class="embed-responsive d-block responsive-size img-fluid" src="https://www.kijkrond.in/stationroeselare/" alt="..." />
                    </iframe>
                </div>
            </div>

请注意，我已删除 w-100 类，因为它会弄乱大小。