如何设置 div 的高度匹配响应内容？

Question

我尝试执行以下操作：
单击时重新调整与 div 内容高度匹配的 div 高度（内容通过“overflow:hidden”隐藏）
div 的内容是响应式的（意味着如果窗口宽度改变，div 的内容高度也会改变。

点击更改 div (.video) 高度以匹配 div 内容 (.video-container) 高度：

$('.video').click(function()
{
    $(this).animate(
    {
        height:$('.video .video-container').height()
    });
});

这很好用，但如果我调整窗口大小，.video-container 的高度会发生变化，我需要再调整 .video 的大小。

这是我已经得到的一切：

视频：

<div class="video">
    <div class="video-container">
        <div class="flowplayer">
            <video preload='none'>
                <source type="video/mp4" src="video.mp4"/>
            </video>
        </div>
    </div>
</div>

javascript：

$(document).ready(function()
{
    $('.video').click(function()
    { 
        $(this).animate(
        {
            height:$('.video .video-container').height()
        }); 
    });

链接已删除 - （找到解决方案，现在一切正常）

如果您单击它扩展的第一个黑色容器，之后您会注意到，如果您重新调整浏览器的大小，视频会变小，但容器会保持较大。我希望这能澄清问题。

Answer 1

根据您发布的新信息，我想出了这个：

新小提琴示例：http://jsfiddle.net/YSqAX/4/

我使用了调整大小插件，因为原生 jquery resize 不会检测到元素何时调整大小。

Ben Alman jquery resize plugin

//animate height
$.fn.animateHeight = function (container) {
    var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
    }).get();

    return this.animate({
        height: thisHeight
    });
};

$(".video").on("click", function () {
    $(this).animateHeight(".video-container");
});

$(".video").resize(function (e) {
    $(this).animateHeight(".video-container");
});