如何使SlideShare上的iframe響應

我添加了一個演示SlideShare上的iframe我page 如何使SlideShare上的iframe響應

代碼：<iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> 但是，當我在手機打開網頁似乎有黑色區域周圍呈現： screnshot

我知道這是因爲風格高度=「600」而發生的，但是當我刪除它時，演示變得很小。如何去除演示文稿中的黑色區域？

來源

2016-11-25 denisshpak8989

我敢肯定* *負責是一個錯字，除非你真的彪它，在這種情況下，我建議給它重要的任務？ – Roberrrt

謝謝，它的星期五 – denisshpak8989

，這是無法與iframe作爲您的iframe工作正常發出，它響應

問題是圖像/幻燈片在SlideShare上的iframe的高度有點小，我認爲你不能做任何事情

希望它有助於

來源

2016-11-25 14:59:03 Rahul

添加以下media query到你的CSS：

@media (max-width: 667px) { 
    iframe { 
    width: 280px; 
    } 
}

隨意調整值作爲德首創。

來源

2016-11-25 15:17:45 Syden

對於一些CSS，製作slideshare嵌入非常容易，可以根據實際寬度縮放高度。您需要爲幻燈片導航添加一個外部，0高度和100％寬度，以及一個填充底部作爲縱橫比的百分比（例如9/16 = 56.25％），並帶有38像素的額外填充。

<div class="iframe-slideshare-16x9">  
    <iframe src="//www.slideshare.net/slideshow/embed_code/key/h1Fw1vmfv5uVlM" 
     frameborder="0" 
     marginwidth="0" 
     marginheight="0" 
     scrolling="no" 
     allowfullscreen> 
    </iframe> 
</div>

的CSS是這樣的：

.iframe-slideshare-16x9 { 
    padding-bottom: calc(56.25% + 38px); 
    position: relative; 
    width: 100%; 
    height: 0; 
} 

.iframe-slideshare-16x9 iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border:1px solid #CCC; 
}

更多關於這一點，在我的博客：https://nathan.gs/2018/01/07/responsive-slideshare-iframe/

來源

2018-01-10 19:21:33

如何使SlideShare上的iframe響應

回答

相關問題