Question

我想在prew_box区域内看到图像的全部。图像溢出prew_box区域。如何调整所有图像的大小以适应prew_box并将它们显示为滑块。

 <div id="wrapper">
    <div id="slider-wrapper">        
        <div id="slider" class="nivoSlider">
            <img src="images/prew_img1.jpg" alt=""  style="width: 100%;" />
            <img src="images/prew_img2.jpg" alt="" style="width: 100%;" />
            <img src="images/prew_img3.jpg" alt=""  style="width: 100%;" />
             <img src="images/prew_img4.jpg" alt=""  style="width: 100%;" />
              <img src="images/prew_img5.jpg" alt=""  style="width: 100%;"  />
        </div>        
    </div>

 </div>

<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

这是我的css代码： -

#slider {

overflow:hidden;
position:relative;
 width:750px; 
height:250px;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;

  min-width:100%;


 }
 #slider a {
border:0;
display:block;
}

 .nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
display: none;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
 .nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
color:#efe9d1;
text-decoration:underline;
}

Answer 1

我通常用这种方式，

img {width: 100%;max-height:250px}

或

img {max-width:100%;height:250px;margin:0 auto}

如果你想通过编程解决（php）尝试剪切或调整图像大小。

http://php.net/manual/en/function.imagecopyresampled.php

图像溢出div区域

1 个答案: