Изображения не изменяют размер правильно - JQuery Backstretch

Question

Я пытаюсь отредактировать шаблон WordPress, который я приобрел. Изображения слайд-шоу, центральная часть главной страницы, не изменяются правильно при изменении размера окна браузера. Высота также кажется фиксированной на очень маленькой высоте и независимо от того, какие изменения CSS я делаю, она, похоже, ничего не меняет. Разработчик, похоже, использовал плагин JQuery под названием Backstretch. Но плагин вложен в множество других элементов и работает неправильно. У меня довольно много опыта работы с HTML и CSS, но в JQuery их нет, поэтому не может найти решение.

Сайт в прямом эфире на www.alegowedding.co.za.

Вот HTML код:

<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> 

Некоторые выдержки из 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; 
} 

Большое спасибо! Эми

Edit: Пример

Изображение ниже рассматривается на полном браузере экрана на мониторе 1080р. Верх и низ изображения обрезаны.

Изображение ниже находится на одном мониторе, но я изменил размер браузера, чтобы уменьшить его ширину. Теперь высота лучше, но пока не показывает полное изображение.

Answer 1

Высота основывается на расчетах обратного хода. Он переключается между 355 и 200 пикселей в зависимости от ширины окна просмотра. Эти значения устанавливаются в режиме «на лету», поэтому вам нужно будет обновить backstetch, чтобы выяснить его соотношение, чтобы исправить это.

В качестве альтернативы вы можете внести некоторые обновления в CSS и включить !important так, чтобы встроенные стили были переопределены. Например ...

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