Question

我需要将iframe嵌入代码设置为适合封闭div的大小。有没有办法做到这一点？嵌入代码由数据库提供，并且已经具有如下的大小调整信息：

＆＃13;

<iframe src="https://vine.co/v/iMJzrThFhDL/embed/simple" width="600" height="600" frameborder="0"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script>

＆＃13;

使用Angular 2代码在运行时插入嵌入代码作为div的innerHTML，如下所示：

＆＃13;

<div [innerHTML]="data.embed" style="width:300px;max-width:300px;"></div>

＆＃13;

嵌入的藤蔓被裁剪但没有缩放。有没有办法强制它缩放以适应？

Answer 1

我很幸运，这个简单的CSS：

示例：https://jsfiddle.net/021ja2sf/

.iframe-video { 
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 0px; overflow: hidden;
   margin-top:40px;
}

.iframe-video iframe { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

您提供的嵌入链接决定了宽度，但CSS可以覆盖它，因此您可以将其删除或保留。

您可以将iframe设置为特定尺寸<iframe width="300" height="300" src="//vine.co/v/iMJzrThFhDL/embed/simple"></iframe>或使用CSS将宽度和高度设置为100％，并确保容器尺寸与其成正比。由于葡萄藤是方形的，你想要两者都是相同的。

jsFiddle in action

使嵌入式iframe缩放以适合封闭的div

2 个答案: