Fancybox description box maintaining size upon window re-size

问题

I have a description box next to the pop-up image in fancybox, however when re-sizing the window from above (try it in jsfiddle), the image adapt to the change and reduce in size, but the description box maintains its size. I'm trying to give the description box the same height as the image, and at the same time reduce in size when window re-sizing in parallel with the image. Any help please.

JSFIDDLE: http://jsfiddle.net/tqnk7e3f/4/

HTML:

<a caption="<h2>Image Header</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

CSS:

.hidden {
    display: none;
}

.fancybox-title {
    right:auto;
    height:auto;
    left:-260px;
     margin-bottom:auto;
    /* CHANGES */
    top: 0;
}

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

}

.fancybox-title .child h2 {
    font-size:140%;
    line-height:1.5;
    margin-top:20px;
    margin-bottom:15px;
}

.fancybox-title .child p {
    margin-bottom:30px;
}

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:

I try to figure out what are you looking for and understand the problem. For me the best solution is this one. I will explain everthing : 1. If you resize the window to small size text won't be able to contain inside the black div. 2. When you open it in big window it will look strange with empty space on the bottom size.

Here's my changes to your code :

.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;
}

Let me know if it helps :)

EDIT

Ok so here is my edit. Dynamic height based on other element is impossible without jQuery so i add a simple function :

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

Getting image height and set text container height based on it. To get it work you also need to change this few things in 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 */
}

Waiting for your approval :)

来源：https://stackoverflow.com/questions/31042106/fancybox-description-box-maintaining-size-upon-window-re-size