jquery调整父母子女的大小

Question

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

<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的容器，则resizing只应对正在调整大小的容器生效，而不对其他容器生效。

$('.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

如果您使用CSS来控制相对维度中height的{​​{1}}和width，请说iframe，然后调整%的大小会自动调整大小div：

iframe

这仅在iframe { height: 80%; width: 100%; margin: 0 auto; } 具有定义尺寸时才有效。

---

编辑修改html，css并提供演示jQuery：

HTML：

.embed

CSS

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

jQuery的：

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

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

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

JS Fiddle demo

Answer 2

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

这不起作用吗？

Answer 3

试试这个：

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