Css 用于媒体查询的幻灯片大小调整

我有一个幻灯片建立在我的登录页，但我想做的是有幻灯片规模缩小和规模的网页。我已经设法做到这一点，所有其他的div/内容，只是这个讨厌的幻灯片，没有做它告诉。这可能是非常简单的事情，但我已经盯着这个网站有点太多了

css:

}

}

}

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>

---

还有一个100%宽度的包装，您可以用像素固定高度和宽度。将它们更改为百分比。 像素不会缩小。像素是像素，百分比是相对的。

---

所以用百分比固定高度和宽度

对不起，我应该说这是我使用的常规样式表。我已经用百分比编写了一个媒体查询样式表，这正是我挠头的地方。

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

<!--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>

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