Php web响应无法进行缩放

我做了一个网站，它看起来像是100%缩放

和25%的变焦

所以，问题是当我做25%缩放时，它会使我的字体变小，但不会使图像（滑块）变小。如何做到这一点？请帮助我。我的代码在这里

<?php include('header.php');?>
<!------ Slider_bg ------------>
<div class="slider_bg">
<div class="wrap">
<!------ Slider------------>
      <div class="slider" style="margin-top:-5px;">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <?php
                $qur="SELECT img FROM home_slider";
                $res=mysql_query($qur);
                while ($row=mysql_fetch_array($res)) {
                    ?>
                        <img src="admin/public/img/home_slider/<?php echo $row[0];?>" data-thumb="" alt="" />
                    <?php
                }
                ?>
            </div>
        </div>
      </div>
    <!------End Slider ------------>
                    <div class="about-info">
                        <center><a href="#">Welcome to AARYA-VEER Campus</a></center>
                        <p>Since its inception in the year of 2014, we made a constant endeavourto provide quality education and a platform for overall development to the students.</p>
                        <p>This institute is recognized by All India Council of Technical Education (AICTE) and affiliated with Gujarat Technological University(GTU).</p>
                        <p>Situated on the out-skirts of Rajkot City, Aaryaveerhas a sprawling and green campus of 27 acres with excellent infrastructure. The AaryaveerCampus is well connected through road with Private Buses and private operators plying from city. The fully residential campus offers students a peaceful and conducive study environment along with facilities like hostel, mess, canteen, indoor & outdoor sports center.</p>
                        <p>The education pattern at Aaryaveerhas a right blend of academia and industry with professionals, mentors, and advisors interacting with student throughout the year, offering enormous opportunities to our students for live projects, internships and placements.</p>
                        <p>Aaryaveer strives to provide rich and complete study experience to its students through cutting –edge amenities, research and innovation, that will assist students in building a successful professional path.</p>
                    </div><br><br>
            <div class="clear"></div>
            <div class="transpo1_head">
            <h3>Approved By AICTE</h3>
            </div>
            <div class="transpo1_head">
            <h3>Affiliated To GTU</h3>
            </div>
            <div class="transpo1">
            <a href="http://www.aicte-india.org/" target="_blank"><img src="web/images/AICTE.png" width="160" height="175"></a>
            </div>
            <div class="transpo1">
            <a href="http://www.gtu.ac.in/" target="_blank"><img src="web/images/GTU.png" width="160" height="175"></a>
            </div>
        </div>
</div>
</div>
 <!--main-->
<div class="main_bg">
<div class="main_btm">
<div class="wrap">
     <div class="main_home">
                <div class="gallery">
                    <h3>Photo Gallery</h3>
                    <ul>
                        <?php
                        $qur="SELECT img FROM gallery LIMIT 6";
                        $res=mysql_query($qur);
                        while ($row=mysql_fetch_array($res)) {
                            ?>
                                <li><a href="admin/public/img/gallery/<?php echo $row[0];?>"><img src="admin/public/img/gallery/<?php echo $row[0];?>" alt=""></a><a href="#"></a></li>
                            <?php   
                        }
                        ?>
                    </ul>
                </div>
                <div class="see_more">
                    <span><a href="gallery.php?nohead=nohead" target="_blank"><font color="#FC2B5F">See More...</font></a></span>
                </div>
                <script type="text/javascript" src="web/js/jquery.lightbox.js"></script>
                <link rel="stylesheet" type="text/css" href="web/css/lightbox.css" media="screen">
                <script type="text/javascript">
                $(function() {
                    $('.gallery a').lightBox();
                });
                </script>
                <div class="terminals">
                    <h3>Addmission Procedure</h3>
                    <p>Admission to the Institute is done through centralized admission procedure by Joint Admission Committee for Professional Courses (JACPC), Ahmedabad, of State Government for 100% seats as per the rules & regulations.. For more information,</p>
                    <a href="#"><font color="#FC2B5F">See More...</font></a>
                </div>
                <div class="clear"> </div>
    </div>
</div>
</div>
<?php include('footer.php');?>

---

很明显，在这两种情况下，滑块占据的屏幕百分比是相同的。我们需要查看滑块的CSS，但本质上只是将%值更改为绝对值

你为什么不试试媒体查询呢？我用过它，但我认为它没有问题。我刚才添加了css。

.slider{
position:relative;
}
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%; 
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding-top:10px;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:15px;
height:15px;
background:#999999;
border-radius:2em;
text-indent:-9999px;
border:0;
margin:0 4px;
}
.theme-default .nivo-controlNav a.active,.theme-default .nivo-controlNav     a:hover{
background:#e1184a;
}
.theme-default .nivo-directionNav a {
display:block;
width:40px;
height:40px;
background:url(../images/l-r-arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:0px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
background-position:-40px 0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important; 
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white; 
filter:alpha(opacity=0); 
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
background:url(../images/prev.png) no-repeat;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position: absolute;
bottom:25px;
right: 44px;
z-index: 9; 
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
@media all and (max-width:320px) {
.nivo-controlNav {
    bottom:5px;
}
}