0

ランディングページにスライドショーを作成しましたが、スライドショーをページに合わせて縮小および拡大したいと考えています。私は他のすべてのdiv/コンテンツでこれを行うことができましたが、言われたとおりにしていないのはこの厄介なスライドショーだけです. それはおそらく非常に単純なことですが、私は今このサイトを少し見すぎています.

CSS:

    .slideshow { 
        margin: 0px 5px 5px 5px; 
        position: relative; 
        width: 920px; 
        height: 610px;

}

#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8 { 
        position: absolute;
        width: 520px;
        height: 156px;
        padding: 227px 200px 227px 200px;
        text-align: center;
        color: #FFF;

}

#slide1 { 
        position: absolute;
        width: 520px;
        height: 20px;
        padding: 295px 200px 295px 200px;
        text-align: center;
        color: #FFF;

}

HTML のスニペット:

<!--Slideshow-->        
  <div class="slideshow">

       <!--We design and communicate-->

        <div id="slide1">
            <span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
            We are a design and communication agency.
            </span>
        </div>

       <div id="slide3"><a href="about/how-we-work.htm">    
            <span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
            We create.
            <br>
            <br>
            branding / web design / packaging / events / press launches / interiors / installations
            <br>
            <br>
            <span style="border-bottom: solid 3px #FFF;">
            our process
            </span>
            </span>
       </a></div>

        <!--Bloom and Blossom-->
       <div id="slide2"></div>

       <!--Elkin-->
       <div id="slide4"></div>

       <!--GKFW-->
       <div id="slide6"></div>

       <!--Swarovski-->
       <div id="slide7"></div>

       <!--ASOS-->
       <div id="slide8"></div>

    </div>

私の目的は、他のすべての div と同様に、これを 100% の幅にすることです。

誰かが助けてくれたら感謝し、ぞっとするようなコーディングについて事前にお詫びします! hah u__u ゲームから離れすぎている。

これは私が持っている MQ スタイルシートです:

.slideshow { 
        margin: 0 5px 5px 5px; 
        position: relative; 
        width:98%; 
        }


#slide2, #slide3, #slide4, #slide6, #slide7, #slide8 { 
        position: absolute;
        width: 98%;
        margin: 0px 5px 5px 0;
        text-align: center;
        color: #FFF;
                    }

#slide1 { 
        position: absolute;
        width: 98%;
        height: 20px;
        margin: 0 5px 5px 0;
        text-align: center;
        color: #FFF;
                    }

幅100%のラッパーもあります

4

1 に答える 1

0

高さと幅をピクセル単位で固定しました。それらをパーセンテージに変更します。ピクセルは縮小されません。ピクセルはピクセルであり、パーセンテージは相対的なものです。したがって、高さと幅をパーセンテージで修正します

于 2013-10-07T21:40:48.027 に答える