jquery 调整父子大小

Question

我有一个带有类嵌入和唯一 ID 的 div 容器。在容器 div 内，我有一个使用 iframe 或对象的嵌入播放器代码。例如：

<div class="embed" id"id21" style="width:480px; height:390px;">
<iframe width="480" height="390" src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

当我调整 div 容器的大小时，我希望其中的播放器也调整大小。嵌入代码具有宽度和高度属性。我执行了以下操作，但无法使其工作。我需要通过容器的 id 来引用容器，因此，如果我有另一个具有不同 id 的容器，则调整大小应该仅对正在调整大小的容器生效，而不是对其他容器生效。

$('.embed').live({
    resize: function(event, ui) {
        var id = this.id;
        var height = $(id).height();
        var width = $(id).width();
        $(id).contents().attr({'width':width,'height':height});
    }
});

Answer 1

$('.embed').live({
    resize: function(event, ui) {
        $(this).find("iframe").css(ui.size);
    }
});

这行不通吗？

Answer 2

如果您使用 CSS 以相对尺寸控制 iframe 的 height 和 width，请说 %，然后调整其大小div 将自动调整 iframe 的大小：

iframe {
    height: 80%;
    width: 100%;
    margin: 0 auto;
}

只有当 .embed 具有定义的尺寸（如您的示例中所示）时，这才有效。

---

编辑修改html、css并提供演示 jQuery:

html:

<div class="embed" id="id21" style="width:480px; height:390px;">
    <iframe src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

css

.embed {
    border: 5px solid #000;
    padding: 1em;
}

.embed:hover {
    border-color: #f90;
}

iframe {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

jQuery:

$('.embed').resizable(
    {
        aspectRatio: 1.23,
        minHeight: 390,
        minWidth: 480
     });

JS小提琴演示。

Answer 3

试试这个：

$('.embed').live({
    resize: function(event, ui) {
        $(this).children()
            .width( $(this).width() )
            .height( $(this).height() );
    }
});