Question

我制作了一个网站，它看起来像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就是。

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

Answer 1

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

网络响应不适用于缩放

1 个答案: