如何使幻灯片共享 iframe 响应答案

【问题标题】：How to make slideshare iframe responsive如何使幻灯片共享 iframe 响应
【发布时间】：2017-04-10 00:08:23
【问题描述】：

我已将带有演示文稿的幻灯片 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

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

【问题讨论】：

我很确定 responsible 是一个错字，除非你真的改了，在这种情况下我建议给它重要的任务？
谢谢，周五了

标签： html css wordpress iframe

【解决方案1】：

使用一些 CSS 可以很容易地制作相对于实际宽度缩放高度的幻灯片嵌入。您需要为幻灯片导航添加一个具有 0 高度和 100% 宽度的外部，以及一个作为纵横比百分比的 padding-bottom（例如 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/

【讨论】：

【解决方案2】：

这不是 iframe 的问题，因为您的 iframe 工作正常并且响应迅速

问题是 slideshare iframe 中的图像/幻灯片的高度有点小，我相信你对此无能为力

希望对你有帮助

【讨论】：

【解决方案3】：

将以下 media query 添加到您的 css 中：

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

根据需要随意调整值。

【讨论】：