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

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

.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该类，因为它会弄乱大小。