html - 如何使 slideshare iframe 响应

Question

我已将带有演示文稿的幻灯片共享 iframe 添加到我的 page

代码:<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

我知道它的发生是因为 style height="600"，但是当我删除它时，显示变小了。如何去除演示文稿周围的黑色区域？

Answer 1

使用一些 CSS 可以很容易地制作根据实际宽度缩放高度的 slideshare 嵌入。您需要添加一个 outer ，高度为 0，宽度为 100%，底部填充为宽高比的百分比(例如 9/16 = 56.25%)，并为幻灯片导航添加 38px 的额外填充。

<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/