【问题标题】:Responsive Slider in iframe, make iframe responsive too?iframe 中的响应式滑块,让 iframe 也响应吗?
【发布时间】:2015-11-12 21:54:24
【问题描述】:

我有一个响应式滑块位于 - http://mymstoday.org/slider/

我必须将此滑块放在 iframe 中并将其包含在我的网站上。

这是我的代码。

<iframe src="http://mymstoday.org/slider/" frameborder="0" marginheight="0" marginwidth="0" style="width:845px;height:400px;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" ></iframe>
<br>
<center>test</center>

问题是当我调整窗口大小时,iframe 始终显示为 400 像素,所以我在它和我的内容下面有这么大的间隙。

如何使 iframe 具有响应性,以便当我的滑块变小时,我的 iframe 和我的内容就在它的正下方?

我尝试使用此代码,但这仍然不是我想要的结果。

请帮忙。

<style type="text/css">
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; }

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
</style>

<div class="videoWrapper">
<iframe src="http://mymstoday.org/slider/" marginheight="0" marginwidth="0" ></iframe>
</div>
<br>
test

【问题讨论】:

    标签: html iframe responsive-design resize slider


    【解决方案1】:

    添加到 videoWrapper css:

    overflow: auto;
    

    并设置一个 0 的边框:

    <iframe src="http://mymstoday.org/slider/" marginheight="0" marginwidth="0" frameborder="0"></iframe>
    

    【讨论】:

    • 对不起,这对我来说完全一样,你是说要这样做吗?

    • 测试
    猜你喜欢
    • 1970-01-01
    • 2015-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-25
    • 1970-01-01
    相关资源
    最近更新 更多