图像溢出div区域

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

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

来源

2014-08-30 user1218032

将图像宽度设置为100％。或者身高。摆脱绝对定位。 – melancia 2014-08-30 13:09:24

max-width：100％;宽度：汽车;高度：自动;为图像和定位为MelanciaUK建议.. – 2014-08-30 13:13:10

@MelanciaUK我做了你的建议。我的形象现在适合prew_box内部，但只看到图像的一部分休息是剪辑 – user1218032 2014-08-30 13:28:52

-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

来源

2014-08-30 13:19:14 budamivardi

如果图像仍处于绝对位置，则这些都不能解决问题。 – melancia 2014-08-30 13:20:05

如果你想通过编程解决（PHP）尝试剪切图像。我使用这个在我的项目中的所有图像 http://php.net/manual/en/function.imagecopyresampled.php – budamivardi 2014-08-30 13:21:15

不只是你的答案没有解决OP问题，但现在你正在推荐一些完全没有范围。 – melancia 2014-08-30 13:24:58

图像溢出div区域

回答

相关问题