图像未正确调整大小 - 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;
}

非常感谢！ 艾米

编辑：示例

下面的图片正在 1080p 显示器上的全屏浏览器上查看。图像的顶部和底部被切断。

下面的图像在同一台显示器上，但我调整了浏览器的大小以使其宽度更小。现在高度更好了，但仍然没有显示完整的图像。

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