Images not resizing correctly - JQuery Backstretch

Question

I am trying to edit a WordPress template that I purchased. The slideshow images, the centerpiece of the homepage, are not resizing properly when the browser window is resized. The height also seems to be fixed at a very small height and no matter what CSS changes I make, it doesn't seem to change anything. The developer seems to have used a JQuery plugin called Backstretch. But the plugin is nested within numerous other elements and isn't working properly. I have quite a bit of HTML and CSS experience, but none in JQuery, so cannot seem to find the solution.

The website is live at www.alegowedding.co.za.

Here is the HTML code:

<p>
    <code>
        <section id='home' class='stag-custom-widget-area '>
            <aside id="stag_wedding_intro-3" class="widget wedding-intro">
                <!-- BEGIN #intro -->
                <section id="intro">
                    <script>
                        jQuery(document).ready(function($){
                        $('#intro .wedding-couple-wrap').backstretch(
                                [
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Horse-and-Carriage-2_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ame-Ash-lego2_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/built_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ash-drums-jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ame-Ash-Peri_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Spiderman_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Gollum_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-guitar_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Harry_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Darth-band-2_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Lightsabers_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Raphael_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Bart_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Fallen_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Ash-darth_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Homer_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Amy-and-Image2.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Piece-of-resistance_jul.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Marriage_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/AshUm_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Wolverine_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Iron-Man_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Magneto_julia.jpg",
                                    "http://www.alegowedding.co.za/wp-content/uploads/2014/10/Hagrid_julia.jpg"
                                ], {duration: 3000, fade: 750});
                        });
                    </script>

                    <div class="wedding-couple-wrap">


                        <!-- END .wedding-couple-wrap -->
                    </div>

Some excerpts from the CSS:

#intro {
  max-width: 100%;
  min-height: 200px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  position: relative;
  margin-bottom: 50px;
}

.wedding-couple-wrap {
  padding-top: 335px;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

Thanks a lot! Amy

Edit: Example

The image below is being viewed on a full screen browser on a 1080p monitor. The top and bottom of the image is cut off.

The image below is on the same monitor, but I have resized the browser to make it smaller in width. Now the height is better, but still doesn't show the full image.

Answer 1

The height is based upon a backstretch calculation. It switches between 355 and 200px depending on the width of the viewport. These values are set inline on the fly, so you would need to update the backstetch works out it's ratio to fix it.

Alternatively you can make some updates to the CSS and include !important so that the inline styles are overridden. For example...

@media (min-width:800px) {.backstretch {
   min-height: 400px!important;
}}
@media (min-width:1000px) {.backstretch {
   min-height: 450px!important;
}}
@media (min-width:12px) {.backstretch {
   min-height: 500px!important;
}}