圖像溢出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區域

回答

相關問題