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

1 回答 1

0

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

.bjqs img {
     width:100%;
}

希望有帮助，祝你好运

于 2012-11-29T19:32:47.240 回答