Question

我在我的目标网页上制作了幻灯片，但我想要做的是让幻灯片缩小并缩放相对于页面。我已经设法与所有其他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>

我的目标是让这个占据100％的宽度，就像所有其他div一样。

感谢任何人提前帮助并为一些令人震惊的编码道歉！哈哈你已经离开游戏太久了。

这是我拥有的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％宽度的包装

Answer 1

您修复了高度和宽度（以像素为单位）。将它们更改为百分比。像素不会缩小。像素是像素，百分比是相对的像素。因此，以百分比来修复高度和宽度

幻灯片调整大小以进行媒体查询

1 个答案: