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

使用媒體查詢為圖像添加固定大小。 我不建議在這里使用引導類，因為要創建響應式圖像，因為它將創建響應式圖像但具有動態大小，因此每個圖像都有自己的大小，因此它會根據自己的大小調整自己的大小，即使他們會使用相同的 class。 因此，創建一個 class 和您想要使用的大小並創建媒體查詢以使其響應。 像這樣，我正在使用隨機大小的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;
  }
}

創建 class 后，將此 class 添加到您正在使用的所有圖像和 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 class 因為它會弄亂尺寸。

Answer 2

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

我制作了一個與我用過的圖片大小相同的空 png。 在這個 png 中放一些文本，這樣我就可以看到這是有效的。

我制作了一個 div，我在其中放入了 png。 我給了 div 一個自制的 CSS class posRelative，它有 overlow: hidden; 和 position：相對；

然后我在具有 posRelative 的同一個 div 中制作了 iframe。 給 iframe 一個自制的 css class posAbsolute 有： Z4757FE07FD492A8BE0EA6A760D683D 頂部：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>