jquery - 在轮播中显示完整图像

Question

我有三张图片要保存在轮播中。我在这里面临一些问题。

1) 在桌面版中，图像被拉伸(stretch)到轮播的宽度和高度。但是我没有得到那个高度的完整图像(请检查代码链接)。

2) 在移动版中，图片没有填满轮播的高度。 导航栏中的菜单出现在轮播后面。

代码:http://jsbin.com/pivehekula/edit?html,output

CSS 代码:

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">

  .img {
height:35px;
margin-right:2px;
}
.navbar-brand {
position:relative;
bottom:5px;
color:white;
}
.menubar {
margin-right:90px;
}
.navcolor {
background-color:#A30000;
height:75px;
padding-top:10px;
}
#colour a,#colour1 a{
color:white;
}
#colour a:hover {
background-color: #FF3D3D;
}
#colour1 a{
color:white;
font-size:20px;
font-weight:bold;
}
#navb {
background-color:#A30000;
}
#colour a{
font-size:15px;
font-weight:bold;
}
.slid {
height:500px;
position: relative;
bottom:16px;
}
.carousel-inner{
height:500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}

正文:

<div class="navbar navbar-default navcolor">
    <div class="container">
        <div class="navbar-header" id="colour1">
            <a href="" class="navbar-brand" class="pull-left" >
            Uprising Rivals
            </a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"  id="navb">
<ul class="nav navbar-nav navbar-right menubar" id="colour">
<li><a href="TYR.htm">Home</a></li>
<li><a href="form.htm">About</a></li>
<li><a href="#com">Community</a></li>
<li><a href="">Strategies</a></li>
</ul>
</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide slid" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="http://p1.pichost.me/i/13/1359503.jpg" class="har">
  <div class="carousel-caption">
    ...
  </div>
</div>
<div class="item">
  <img src="http://all4desktop.com/data_images/1920%20x%201200/4211692-abstract-color-background-picture-8016.jpg"  class="har">
  <div class="carousel-caption">
    ...
  </div>
</div>
<div class="item">
  <img src="http://www.macwallhd.com/wp-content/Wallpapers/Abstract/Mac%20Wallpaper%20Spin%20The%20Apple%20Circle-575024442.jpeg" alt="cont" class="har">
  <div class="carousel-caption">
    ...
  </div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 1

因此，您需要做的就是为 carousel-inner 指定一个高度，然后为 carousel-inner item 指定一个 100% 的高度，然后为 carousel-inner item img 指定一个高度。它应该如下所示:

#carousel-example-generic .carousel-inner{
  height: 500px;
}
#carousel-example-generic .carousel-inner .item{
  height: 100%;
}
#carousel-example-generic .carousel-inner .item img{
  width: 100%;
  height: 100%;
}

这是一个可用的 fiddle Fiddle

唯一的问题是它会以看起来令人不快的方式拉伸(stretch)图像，因此您可能需要为轮播中的每个元素创建背景图像，以使图像看起来正常。

因此，您可能想要做的是摆脱轮播中的图像，并为轮播元素提供一定百分比的填充底部，然后使用此百分比进行操作，直到您的轮播达到您想要的高度。然后给每个元素一个背景图片，如下所示:

#carousel-example-generic .carousel-inner .item{
  padding-bottom: 50%;
}
#carousel-example-generic .carousel-inner .first-item{
  height: 100%;
  width: 100%;
  background: url('http://p1.pichost.me/i/13/1359503.jpg');
  background-size:cover;
  background-position: center;
}
#carousel-example-generic .carousel-inner .second-item{
  height: 100%;
  width: 100%;
  background: url('http://all4desktop.com/data_images/1920%20x%201200/4211692-abstract-color-background-picture-8016.jpg');
  background-size:cover;
  background-position: center;
}
#carousel-example-generic .carousel-inner .third-item{
  height: 100%;
  width: 100%;
  background: url('http://www.macwallhd.com/wp-content/Wallpapers/Abstract/Mac%20Wallpaper%20Spin%20The%20Apple%20Circle-575024442.jpeg');
  background-size:cover;
  background-position: center;
}

只需将类添加到轮播中的每个元素，如:

<div class="item active first-item">
  <div class="carousel-caption">
    ...
  </div>
</div>
<div class="item second-item">
  <div class="carousel-caption">
    ...
  </div>
</div>
<div class="item third-item">
  <div class="carousel-caption">
    ...
  </div>
</div>

这将是响应式的，不会扭曲您的图像并使它们看起来很奇怪。

这是 Fiddle 的工作 fiddle

就导航栏而言，给导航栏一个位置和一个 z-index 以确保它位于旋转木马上方，例如:

.navbar-default{
  position: relative;
  z-index: 2;
}