如何在嵌入.col-md-5的bootstrap-carousel中居中更大的图像? 我写了一个例子here。我左边有一个旋转木马(.col-md-5),右边有一个内容(.col-md-7)。图像应该更大但不是(在更大的屏幕上)。
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1920x1280" alt="img1">
<div class="carousel-caption">
<h3>Lorem ipsum</h3>
<p>Some text blabla</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x1280" alt="img2">
</div>
<div class="item">
<img src="http://placehold.it/1920x1280" alt="img3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-7">
<h1>ABOUT</h1>
<h2>BLABLA</h2>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos porro ab</strong> Veritatis laborum cupiditate error accusantium laboriosam, iusto quas ducimus odit facilis delectus animi dolores illum iste ullam deserunt.</p>
</div>
</div>
</div>
在style.css中:
body {
background-color: #2E4053;
color: #E5E7E9;
margin: 0;
height: 100vh;
width: 100vw;
}
.carousel, .item {
height: 100vh;
}
.carousel-inner img {
width: 100%;
margin: auto;
}