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% 的宽度。

感谢任何人可以帮助并提前为一些令人震惊的编码道歉！哈哈，你玩得太久了。

这是我拥有的 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 回答