Question

我已将slidehare 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

我知道它发生的原因是因为样式高度=“600”，但是当我删除它时，演示文稿就变得很小了。如何删除演示文稿周围的黑色区域？

Answer 1

使用一些CSS，可以很容易地制作相对于实际宽度缩放高度的slidehare嵌入。您需要添加一个外部，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/

Answer 2

这不是iframe的问题，因为你的iframe工作正常而且响应

问题是slidehare iframe中的图像/幻灯片的高度有点小，我相信你无法做任何事情

希望有所帮助

Answer 3

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

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

随意根据需要调整值。

如何使slidehare iframe响应

3 个答案: