亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

慕萊塢森 2022-06-16 16:57:32
我有一個來自 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>
查看完整描述

2 回答

?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

我一直在谷歌搜索答案，我想出了一些簡單的方法。感謝此博客上的解釋：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>


查看完整回答
反對 回復 2022-06-16
?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

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


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號