Question

我有三张图片要保存在旋转木马中。我在这里面临一些问题。

1）在桌面版中，图像被拉伸到旋转木板的宽度和高度。但我没有在那个高度获得完整的图像（请检查代码链接）。

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

因此，您需要做的就是规定旋转木马内部的高度，然后旋转木马内部物品的高度为100％，然后是旋转木马内部物品的高度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

的小提琴

唯一的问题是它会以令人不愉快的方式拉伸图像，因此您可能想要为旋转木马中的每个项目创建背景图像，以使图像看起来正常。

所以你可能想要做的就是去掉旋转木马中的图像并给旋转木马项目一个百分比的填充底部并用这个百分比玩，直到你的旋转木马是你想要的所需高度。然后为每个项目提供如下背景图像：

#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

的工作小提琴

就导航栏而言，为导航栏指定一个位置和一个z-index，以确保它位于旋转木马上方：

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

在旋转木马中显示完整图像

1 个答案: