圖像不能正確調整大小 - jQuery Backstretch

Question

我試圖編輯我購買的WordPress模板。當瀏覽器窗口調整大小時，幻燈片圖像（主頁的中心部分）無法正確調整大小。高度似乎也固定在一個非常小的高度，無論我做了什麼CSS變化，它似乎都沒有改變任何東西。開發者似乎使用了一個名爲Backstretch的JQuery插件。但是插件嵌套在許多其他元素中，並且工作不正常。我有相當多的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; 
} 

非常感謝！ 艾米

編輯：實施例

圖像下面被上全屏瀏覽器觀看的1080監視器上。圖像的頂部和底部被切斷。

下面的圖像在同一個顯示器上，但我調整了瀏覽器的大小以使其寬度變小。現在身高比較好，但仍然沒有顯示完整的圖像。

Answer 1

該高度基於背伸計算。它根據視口的寬度在355和200px之間切換。這些值是即時設置的，所以你需要更新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; 
}}