幻燈片中的圖片大小調整問題

-1

問題是，在我的一個頁面中，我有一張幻燈片，其中我的圖像是1920x1080，而幻燈片的寬度只設置爲1350。我的圖片沒有居中，只能看到圖片左上角的1/3左右。幻燈片也沒有達到屏幕的末端（< ---->），這裏有這麼小的空間。任何解決方案幻燈片中的圖片大小調整問題

圖片：http://tinypic.com/view.php?pic=29crp7a&s=6

代碼

HTML：

<div id="container"> 


<div id="banner"> 

<ul class="bjqs"> 

<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li> 

<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li> 

<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li> 

</ul> 

</div> 


</div> 


<script src="js/jquery-1.6.2.min.js"></script> 

<script src="js/basic-jquery-slider.min.js"></script> 


<script> 
    $(document).ready(function() { 

    $('#banner').bjqs({ 
     'animation' : 'slide', 
     'width' : 1350, 
     }); 

    }); 

</script>

的CSS：

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;} 
li.bjqs-slide{display:none;position:absolute;} 

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;} 

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;} 
ol.bjqs-markers li{float:left;} 

p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;} 

/* demo styles */ 

body{ 
font-family: 'Carter One', sans-serif; 
} 

#container{ 
width:100%; 
padding:20px 0; 
margin:0 auto; 
overflow:hidden; 
} 

#banner { 
height:300px; 
width:700px; 
margin:0 auto; 
position:relative; 
background:#fff; 
#fff solid; 

} 

ul.bjqs-controls li a{ 
display:block; 
padding:5px 10px; 
position:absolute; 
background:#000000; 
color:#fd0100; 
text-decoration:none; 
text-transform:uppercase; 
} 

a.bjqs-prev{ 
left:0; 
} 

a.bjqs-next{ 
right:0; 
} 

p.bjqs-caption{ 
background:rgba(0,0,0,0.7); 
color:#fff; 
text-align:center; 
} 

ol.bjqs-markers{ 
position:absolute; 
bottom:-50px; 
} 

ol.bjqs-markers li{ 
float:left; 
margin:0 3px; 
} 

ol.bjqs-markers li a{ 
display:block; 
height:10px; 
width:10px; 
border:4px solid #fff; 
overflow:hidden; 
text-indent:-9999px; 
background:#000; 
border-radius:10px; 

} 

ol.bjqs-markers li.active-marker a{ 
background:#fd0100; 
}

來源

2012-11-29 user1864136

如果上市，你已經研究哪些解決方案，爲什麼他們不爲你工作，這將有助於。 –

它可能需要一段時間，我試過改變一切，所以我在這裏發佈，因爲我想你們可能更有經驗，也許會發現我的代碼有什麼問題。我設法縮小了尺寸，但是圖像仍然是全尺寸的（它們沒有被調整到新的更小的尺寸）。 – user1864136

的解決方案是非常簡單的實際。您需要在CSS中將圖片的寬度設置爲100％。

.bjqs img { 
    width:100%; 
}

希望幫助，祝你好運

來源

2012-11-29 19:32:47 Outcast

謝謝！它確實幫助了很多LOT，現在只有約5％的底部頁面被錯過了！它的中心和所有，只是底部的一小部分被切斷了！ – user1864136

基本上他們從側面居中，現在只需要向上移動一點。也許我只是愚蠢的，但。 – user1864136

幻燈片中的圖片大小調整問題

回答

相關問題