解决bootstrap轮播图因为图片尺寸造成的问题

发现问题

​ 在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差

解决方案

​ 我们先找到轮播图的相关代码,如下:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
					<!-- 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>
						<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						<li data-target="#carousel-example-generic" data-slide-to="4"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="img/1.jpg" class="img-responsive" alt="...">
							<div class="carousel-caption">

							</div>
						</div>

找到最外层的div盒子,给它设定一个固定高度,这边设置为300px,然后找到img标签,将图片设为块状元素,宽度100%,高度与最外层div盒子相同,代码如下:

		#carousel-example-generic {
				height: 300px;
			}
		#carousel-example-generic .carousel-inner>.item>img {
			display: block;
			width: 100%;
			height: 300px;
		}

这样,就完美的解决了图片尺寸的问题,效果如下:

猜你喜欢

转载自blog.csdn.net/codeliang20/article/details/106365717