0

購入した 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 モニターの全画面ブラウザーで表示されています。画像の上下が切れています。 切り落とす

下の画像は同じモニターですが、幅を狭くするためにブラウザのサイズを変更しています。高さは改善されましたが、まだ完全な画像は表示されていません。 カットオフが少ない

4

1 に答える 1

0

高さはバックストレッチ計算に基づいています。ビューポートの幅に応じて 355 と 200px の間で切り替わります。これらの値はオンザフライでインラインに設定されるため、バックステッチを更新して比率を修正する必要があります。

!importantまたは、インライン スタイルがオーバーライドされるように、CSS を更新してインクルードすることもできます。例えば...

@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;
}}
于 2014-12-31T10:37:24.007 に答える