在旋转木马中制作响应式图像

时间：2016-06-09 09:38:35

标签： html css twitter-bootstrap

我希望旋转木马中的图像能够响应特别是图像的高度。宽度是可以的，但它的高度只使图像的一半。有人能帮我吗？请给我一些想法。我只想要500px高度，我实现了这一点，但我希望我的图像高度达到100％。

这是图片enter image description here

这是完整的图像 enter image description here

这是html代码。

<!DOCTYPE html>
<html>
<head>
    <title>Student Portal</title>
    <link rel="stylesheet" href ="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="style.css" rel ="stylesheet">
    <link rel="shortcut icon" type="img/png" href="img/asd.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class ="top-bar-dark">
        <div class="container">
            <div class="row">
                  <div class="col-sm-4 col-xs-7">
                        <div class="top-bar-socials">
                            <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
                                <i class="fa fa-facebook"></i>
                            </a>
                            <a href="https://twitter.com/official_gapc">
                                <i class="fa fa-twitter"></i>
                            </a>
                            <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
                                <i class="fa fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-8 col-xs-5 text-right">
                        <ul class="list-inline top-dark-right">                      
                            <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
                            <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
                            <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
        <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="40">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
                <img src="img/logo.png" alt="GAPC" class="img-responsive">
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse"> 
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
            <ul class="dropdown-menu">
              <li><a href="#">History</a></li>
              <li><a href="#">Mission and Vision</a></li>
            </ul>
            <li><a href="#">Admissions</a></li>
            <li><a href="#">Contact us</a></li>
             <li><a href="#">Faculty Portal</a></li>
        </ul>
    </div>
</div>
</nav>

    <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>
              <li data-target="#myCarousel" data-slide-to="3"></li>
         </ol>

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

        <div class="item">
          <img src="img/tubol.jpg" alt="Chania ">
        </div>

        <div class="item">
          <img src="img/tulok.jpg" alt="Flower">
        </div>

        <div class="item">
          <img src="img/ebak.jpg" alt="Flower">
        </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>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

这是我的css代码。

.navbar-header{
  height: 74px;
}

.navbar-toggle{
  position: relative;
  top: 15px;
}
.navbar-default .navbar-nav > li > a {
 font-weight: 560;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 70px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 }
 .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
    color:#a92419;
    border-bottom-color: #a92419;
  }
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #a92419;
    background-color: transparent;
}
 .navbar-default{
 background-color:#fff;
 margin: 0;

 }
 .nav>li>a {
 position: relative;
 }
.navbar-default .navbar-right > li > a {
padding: 0 20px;
margin-right:6px;
 }
 .nav.navbar-nav > li{
 display: :inline-block;
 }
 .nav.navbar-nav{
 list-style-type:none;
 }
 .nav.navbar-nav > li > a:hover{
    color:#a92419;
   border-bottom-color: #a92419;
  }
  .navbar-default .navbar-toggle .icon-bar {
  background-color:#a92419;
  margin:0 0 4px;
  width: 25px;
  height: 5px;
  margin-right: 13px;
  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background: none;
  }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000; 
  margin: 0px;
}
.navbar.affix {
  width: 100%;
     qposition: fixed;
    top:0;
    background-color: rgba(255,255,255,0.7); 
}
.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu>li>a:hover {
    color:#a92419;
}
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 3em;
    color: #333;
    white-space: nowrap;
}
.dropdown:hover a.dropdown-toggle {
  border-bottom-color: #a92419;
  color:#a92419;
}
.top-bar-dark {
  background-color: #a92419;
}

.top-bar-light {
  background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
  border-color: #ddd;
}
.top-bar-light .top-dark-right li a:hover {
  color: #32c5d2;
}
.top-bar-socials {
  line-height: 30px;
  padding-top: 5px;
}
.top-bar-socials:after {
  display: table;
  clear: both;
  content: "";
}
.top-bar-socials a {
  margin: 0px 8px;
  text-decoration: none;
  font-size:18px;
  color: #fff;
}

.top-dark-right {
  margin: 0px;
  padding: 0px;
}
.top-dark-right li {
  line-height: 40px;
  border-left: 1px solid #932015;
  padding: 0px 10px;

}
.top-dark-right li, .top-dark-right li a {
  color: #d7d7d7;
  font-size: 12px;
}

.top-dark-right li i {
  margin-right: 5px;
}

.top-dark-right li a:hover {
  color: #fff;
}
a.login{
  text-decoration: none;
}
.fa-facebook:hover{
  color:#3b5998;
}
.fa-twitter:hover{
  color:#1dcaff;
}
.fa-linkedin:hover{
  color:#007bb5;
}
.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
}
.carousel-inner{
height: 500px;
}
.carousel-inner img{
   height: auto;
  width: 100%;
}
@media (max-width: 240px){
  .img-responsive{
    padding-top: 5px;
    width: 190px;
    height: 60px;
  }
  .navbar-default .navbar-toggle {
   padding-right: 0px;
  }
}
@media(min-width: 241px) and (max-width: 320px){
   .img-responsive{
    width: 240px;
    height: 60px;
    margin-left: 5px;
  }
    .navbar-default .navbar-toggle {
   padding-right: 0px;
  }
}
@media(min-width: 321px) and (max-width: 480px){
   .img-responsive{
    width: 250px;
    height: 65px;
    margin-left:15px;
  }
  .navbar-toggle{
    padding-top: 10px;
  }
}
@media(min-width: 481px) and (max-width: 767px){
   .img-responsive{
    width: 280px;
    height: 70px;
    margin-left:15px;
  }
  .navbar-toggle{
    padding-top: 10px;
  }
}
@media(min-width: 768px) and (max-width: 1024px){
   .img-responsive{
    width: 260px;
    height:70px;
  }
  .navbar-default .navbar-right > li > a {
  padding: 0 10px;
  margin-right:6px;
 }

}

3 个答案:

答案 0 :(得分：1)

尝试100vh，CSS3为我们提供视口相对单位。 100vw表示100％的视口宽度。 100vh; 100％的高度。在进行全屏幻灯片时非常方便。

试试这个：

.carousel-inner img{
   height: 100vh;
  width: 100%;
}

注意：对于Internet Explorer，它仅受ie11支持，对于其他浏览器没有问题。

更新：

将此类添加到您的样式中：

.item{
    height: 500px;
}

.item img {
    width: 100%;
    height: 100%;
}

这是一个演示：https://jsfiddle.net/qd4xhzvm/

答案 1 :(得分：1)

试试这个

.item.active img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

答案 2 :(得分：0)

我通过向max-height添加.carousel-inner img来解决这个问题。谢谢你们的努力。呵呵。 

.carousel-inner img{
  width: 100%;
  max-height: 500px;
}
.carousel-inner{
  height: 500px;
}
相关问题
最新问题