引用Bootstrap的轮播,怎么统一轮播图片的尺寸

 我来答
上贼船莫怕死
推荐于2016-07-25 · 知道合伙人教育行家
上贼船莫怕死
知道合伙人教育行家
采纳数:4981 获赞数:80402
毕业于福建省厦门双十中学

向TA提问 私信TA
展开全部
  输出图片的时候给它限制大小,

  把图片作为div的背景,这样可以用background-position 控制它显示的区域,自动对图进行切割,也可以用background-size 来自动缩放图片。
  附简单源代码:
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background:url(a.jpg); background-size:cover;">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h4>hello
</div>
</div>
<div class="item" style="background:url(b.jpg); background-size:cover;">
<img src="b.jpg" alt="...">
<div class="carousel-caption">
<h4>hi
</div>
</div>
<div class="item" style="background:url(a.jpg); background-size:cover;">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h4>haa
</div>
</div>

</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
DAVIAL
2015-05-23 · 知道合伙人教育行家
DAVIAL
知道合伙人教育行家
采纳数:3849 获赞数:34547
在校期间任学生党支部书记 原供西乡塘区人民政府会计

向TA提问 私信TA
展开全部
<div id="myCarousel" class="carousel slide"《这加一个 ,内容自己编一个,比如 id=“carousel-bg”》>
<!-- Carousel items -->
<div class="carousel-inner">

<div class="active item">
<img class="controlsize" src="images/gallery-1.jpg" alt="" >
</div>
{section name=assid loop=$contact}
<div class="item">
<img class="controlsize" src="upload/{$contact[assid].photos}" alt="" >
</div>
{/section}

</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
---------------------------------------------------------------------------------------------------
在Css里设置下
#carousel-bg{
height:你要设置的高度;

#carousel-bg img{
width:100%;
height:auto;

------------------------------------------------------------------------------------------------------------
这样就设置好了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-10-27
展开全部
改图片尺寸,跟bootstrap没有关系,下个处理图片的软件就好了
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式