解决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;
		}

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