Javascript Fancybox描述框在窗口重新调整大小时保持大小

我在fancybox中的弹出图像旁边有一个描述框，但是当从上方重新调整窗口大小时（在JSFIDLE中尝试），图像会适应变化并减小大小，但描述框会保持其大小。我试图使描述框与图像具有相同的高度，同时在与图像平行调整窗口大小时减小大小。请帮忙

JSFIDDLE：

HTML:

JQUERY：

      $('.fancybox').fancybox({
                prevEffect : 'fade',
                nextEffect : 'fade',
               padding:0,

                closeBtn  : true,
                arrows    : true,

               nextClick : true,    


               helpers : { 
    title : { type : 'outside' }
   },

               helpers : {

                    thumbs : {
                        width  : 80,
                        height : 80

                    }
                },



 beforeLoad: function() {
    this.title = $(this.element).attr('caption');
   }

            });

---

我试图弄清楚你在寻找什么，并理解这个问题。 对我来说，最好的解决办法是。 我会解释一切： 1.如果调整大小窗口的小尺寸文本将无法包含在黑色div中。 2.当你在大窗口打开它时，底部的空白看起来会很奇怪

以下是我对您的代码所做的更改：

.fancybox-title .child 
{
    height: auto;
    white-space:normal;
    text-align:left;
    /* height:470px; - Remove static height :) */
    padding:0 20px;
    max-width:200px;
    margin-right:auto;
    border-radius:0;
}

如果有帮助，请告诉我：）

编辑

好的，这就是。 没有jQuery，基于其他元素的动态高度是不可能的，因此我添加了一个简单的函数：

$( window ).resize(function() {
   imageHeight = $('.fancybox-inner').height();
    $('.fancybox-title').height(imageHeight);
});

获取图像高度并基于图像高度设置文本容器高度。 要使其正常工作，您还需要更改CSS中的以下几项内容：

.fancybox-title {
    right:auto;
    height:auto; /* This container will now set it height to image height */
    left:-260px;
    margin-bottom:auto;
    top: 0;
}

.fancybox-title .child {
    white-space:normal;
    text-align:left;
    padding:0 20px;
    max-width:200px;
    margin-right:auto;
    border-radius:0;
    height:100%; /* Leave it inside so it must have the same size */
}

---

等待您的批准：）

我们是否无法使用您当前建议的解决方案，并使该框与弹出图像的高度相同？这就是我在JSFIDLE外部本地尝试时的显示方式。前一版本也一样。看起来您没有包含样式表，因为甚至

空白：正常的
在您的图像中不可见。你能检查一下吗？你是说fancybox样式表吗？不，我是说样式：
。隐藏{display:none；}。fancybox标题{右：自动；高度：自动；左：-260px；页边距底部：自动；顶部：0；}。fancybox标题。child{空白：正常；文本对齐：左；填充：0 20px；最大宽度：200px；页边距右：自动；边框半径：0；高度：100%；}.fancybox标题。子h2{字体大小：140%；行高：1.5；页边距顶部：20px；页边距底部：15px；}.fancybox标题。子p{页边距底部：30px；}
它们在小提琴的右侧
$( window ).resize(function() {
   imageHeight = $('.fancybox-inner').height();
    $('.fancybox-title').height(imageHeight);
});

.fancybox-title {
    right:auto;
    height:auto; /* This container will now set it height to image height */
    left:-260px;
    margin-bottom:auto;
    top: 0;
}

.fancybox-title .child {
    white-space:normal;
    text-align:left;
    padding:0 20px;
    max-width:200px;
    margin-right:auto;
    border-radius:0;
    height:100%; /* Leave it inside so it must have the same size */
}