幻灯片中的图片大小调整问题

Question

问题是，在我的一个页面中，我有一张幻灯片，其中我的图像是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; 
} 

Answer 1

的解决方案是非常简单的实际。 您需要在CSS中将图片的宽度设置为100％。

.bjqs img { 
    width:100%; 
} 

希望帮助，祝你好运