移動視圖中的Bootstrap旋轉木馬圖像

Question

您好，我在移動視圖中遇到Bootstrap問題。當我在移動視圖中時，圖像是響應式的，但它對頁面來說很長，我必須滾動才能看到它被剪切掉。 Mobile view。

我想讓整個圖像「適合」。 這裏是網站： http://edslab.esy.es/Screen-Brodyr-AB-master/index.html

#topnavbar { 
 
    margin: 0; 
 
} 
 
#topnavbar.affix { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 

 
} 
 

 

 

 
.navbar-nav > li{ 
 
    padding-left:30px; 
 
    padding-right:30px; 
 
} 
 
/*navbar colour*/ 
 
.navbar-default { 
 
    background-color: #177f5e; 
 
    border-color: #ffffff; 
 
} 
 
.navbar-default .navbar-brand { 
 
    color: #ffffff; 
 
} 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus { 
 
    color: #000000; 
 
} 
 
.navbar-default .navbar-text { 
 
    color: #ffffff; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #ffffff; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #000000; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
} 
 
.navbar-default .navbar-nav > .open > a, 
 
.navbar-default .navbar-nav > .open > a:hover, 
 
.navbar-default .navbar-nav > .open > a:focus { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
} 
 
.navbar-default .navbar-toggle { 
 
    border-color: #ffffff; 
 
} 
 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: #ffffff; 
 
} 
 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #ffffff; 
 
} 
 
.navbar-default .navbar-collapse, 
 
.navbar-default .navbar-form { 
 
    border-color: #ffffff; 
 
} 
 
.navbar-default .navbar-link { 
 
    color: #ffffff; 
 
} 
 
.navbar-default .navbar-link:hover { 
 
    color: #000000; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
 
    color: #ffffff; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    color: #000000; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
    } 
 
} 
 

 
/*whitespace*/ 
 
.navbar { 
 
    position: relative; 
 
    min-height: 50px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid transparent; 
 
} 
 
.navbar { 
 
    margin-bottom: 0px; 
 
} 
 

 
/*bildspel*/ 
 
.carousel { 
 
    height: 1000px; 
 
    margin-bottom: 70px; 
 
} 
 
.carousel-caption { 
 
    z-index: 10; 
 
} 
 
.carousel .item { 
 
    height: 1000px; 
 
    background-color: #777; 
 
} 
 
.carousel-inner > .item > img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100%; 
 
    height: 1000px; 
 
} 
 
/*textstorlek.*/ 
 
.carousel-caption p { 
 
    margin-bottom: 20px; 
 
    font-size: 21px; 
 
    line-height: 1.4; 
 
} 
 

 

 
.carousel-caption i { 
 
    margin-bottom: 20px; 
 
    font-size: 21px; 
 
    line-height: 1.4; 
 
} 
 
/*Mer utrymme mellan bilderna.*/ 
 
.featurette-divider { 
 
    margin: 80px 0; 
 
} 
 

 
/* scrollUp */ 
 
#scrollUp { 
 
    bottom: 20px; 
 
    right: 20px; 
 
    padding: 10px 20px; 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
/*Google maps*/ 
 
.google-maps { 
 
    position: relative; 
 
    padding-bottom: 75%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.google-maps iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    border: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
     <nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="container"> 
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
         <span class="sr-only">Toggle navigation</span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
        <a class="navbar-brand">Screen Brodyr i Kristianstad AB</a> 
 
       </div> 
 
       <div id="navbar" class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li class="active"><a href="index.html">Om oss</a> 
 
         </li> 
 
         <li><a href="textiltryck.html">Textiltryck</a> 
 
         </li> 
 
         <li><a href="transfertryck.html">Transfertryck</a> 
 
         </li> 
 
         <li><a href="brodyr.html">Brodyr</a> 
 
         </li> 
 
         <li><a href="#digitaltryck">Digitaltryck</a> 
 
         </li> 
 
         <li><a href="tampotryck.html">Tampotryck</a> 
 
         </li> 
 
         <li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a> 
 
         </li> 
 

 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
     <!--Navigeringsfält slut.--> 
 
     <!--bildspel--> 
 
     <div id="bildspel" class="carousel slide" data-ride="carousel"> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
       <li data-slide-to="0" class="active"></li> 
 
       <li data-target="#bildspel" data-slide-to="1"></li> 
 
       <li data-target="#bildspel" data-slide-to="2"></li> 
 
      </ol> 
 
      <div class="carousel-inner" role="listbox"> 
 
       <div class="item active"> 
 
        <img class="first-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal"> 
 
        <div class="container"> 
 
         <div class="carousel-caption"> 
 
          <h1>Välkommen till Screen Brodyr i Kristianstad AB!</h1> 
 
          <p> 
 
           Vi bygger webbplats mer information kommer inom kort!</p> 
 
          <p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img class="second-slide" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal2.jpg" alt="Maskin"> 
 
        <div class="container"> 
 
         <div class="carousel-caption"> 
 
          <h1> 
 
Vi bygger webbplats mer information kommer inom kort!</h1> 
 
          <p> 
 
           Vi bygger webbplats mer information kommer inom kort!</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img class="third-slide" src="image/lokal2.jpg" alt="lokal2"> 
 
        <div class="container"> 
 
         <div class="carousel-caption"> 
 
          <h1> 
 
Vi bygger webbplats mer information kommer inom kort!</h1> 
 
          <p> 
 
           Vi bygger webbplats mer information kommer inom kort!</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#bildspel" 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="#bildspel" 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

刪除height

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    //height: 1000px; 
} 

Answer 2

您好我理解你的問題是，當你在移動圖像尺寸打開你的網站是多少大的下降我們必須滾動更多，所以使用Bootstrap的類.img-responsive

你可以用這種方式

<img class="first-slide img-responsive" src="http://edslab.esy.es/Screen-Brodyr-AB-master/image/lokal.jpg" alt="Lokal"> 

與滑塊的高度嘗試是更大，所以使尺寸更小，將幫助ü作出響應或不給任何高度的div和圖像用自己的圖像的高度。