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

Question

我需要使藤蔓的 iframe 嵌入代码适合封闭 div 的大小。有没有办法做到这一点？嵌入代码由数据库提供，并且已经具有如下大小信息:

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

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

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

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

Answer 1

您提供的嵌入链接决定了宽度，但这可以被 CSS 覆盖，因此您可以接受或保留它。

您可以将 iframe 设置为特定尺寸，<iframe width="300" height="300" src="//vine.co/v/iMJzrThFhDL/embed/simple"></iframe>或者使用 CSS 为其指定 100% 的宽度和高度，并确保容器尺寸成正比。由于 Vines 是方形的，因此您希望两者相同。

jsFiddle in action