-1

問題は、私のページの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 に答える