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显示器上的全屏浏览器上查看以下图像。图像的顶部和底部被切掉。 Cut Off

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

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

图像没有正确调整大小 - JQuery Backstretch

1 个答案: