引用Bootstrap的轮播,怎么统一轮播图片的尺寸
3个回答
展开全部
输出图片的时候给它限制大小,
把图片作为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>
把图片作为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>
展开全部
<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;
}
------------------------------------------------------------------------------------------------------------
这样就设置好了
<!-- 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没有关系,下个处理图片的软件就好了
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询