空白

Question

.carousel-fade { 
 
    .carousel-inner { 
 
     .item { 
 
      transition-property: opacity; 
 
     } 
 
     
 
     .item, 
 
     .active.left, 
 
     .active.right { 
 
      opacity: 0; 
 
     } 
 

 
     .active, 
 
     .next.left, 
 
     .prev.right { 
 
      opacity: 1; 
 
     } 
 

 
     .next, 
 
     .prev, 
 
     .active.left, 
 
     .active.right { 
 
      left: 0; 
 
      transform: translate3d(0, 0, 0); 
 
     } 
 
    } 
 

 
    .carousel-control { 
 
     z-index: 2; 
 
    } 
 

 
} 
 

 

 

 

 

 
.carousel-fade { 
 
    .carousel-inner { 
 
     .item { 
 
      transition-property: opacity; 
 
     } 
 
     
 
     .item, 
 
     .active.left, 
 
     .active.right { 
 
      opacity: 0; 
 
     } 
 

 
     .active, 
 
     .next.left, 
 
     .prev.right { 
 
      opacity: 1; 
 
     } 
 

 
     .next, 
 
     .prev, 
 
     .active.left, 
 
     .active.right { 
 
      left: 0; 
 
      transform: translate3d(0, 0, 0); 
 
     } 
 
    } 
 

 
    .carousel-control { 
 
     z-index: 2; 
 
    } 
 
} 
 

 

 

 

 
html, 
 
body, 
 
.carousel, 
 
.carousel-inner, 
 
.carousel-inner .item { 
 
    height: 100vh; 
 
} 
 

 
.item:nth-child(1) { 
 
} 
 

 
.item:nth-child(2) { 
 

 
} 
 

 
.item:nth-child(3) { 
 
    
 
} 
 

 

 
here is the html:

<div class="carousel-inner"> 
 
     <div class="active item" style="height:100%;"> 
 
      
 
      <h2 style="position:absolute;margin:13.5% 0 0 40%;z-index:3;font-size:250%;color:gold;font-family:oleo;font-style:italic;" 
 
       id="h2" class="dtext">Specializing in Wood and Salt crafts</h2> 
 
      
 
      <p class="lead dtext" id="p" style="position:absolute;margin:20.5% 0 0 42%;z-index:3;font-size:170%;color:gold;font-family:variane; width:35%;text-align:centre;font-style:italic;"> 
 
      
 
       Trading in almost all kinds of products but you will love our specially designed wooden goods and salt items 
 
      
 
      </p> 
 
      
 
      
 
      <p class="lead dtext" id="p" style="position:absolute;margin:34.5% 0 0 42%;z-index:3;font-size:170%;color:gold;font-family:variane; width:35%;text-align:centre;font-style:italic;"> 
 
      
 
       It's where most of our love and effort goes in... 
 
      
 
      </p> 
 
      
 
      
 
      
 
      
 
      
 
      
 
      
 
      <img src="img/pexels-photo-28620.jpg" class="image-responsive" style="position:absolute;z-index:2;overflow-y:hidden;" /> 
 
     
 
      
 
     
 
     </div> 
 
     <div class="item"><img class="image-responsive" src="img/salt-lamps-1047941_1920.jpg" /></div> 
 
     <div class="item"><img class="image-responsive" src="img/port-1569694_1920.jpg" /></div> 
 
    </div> 
 
    
 

 
    <!--  <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a> --> 
 
    <a class="carousel-control right" href="#carousel" data-slide="next" style="margin:22% 4% 0 0;height:6%;border:1px solid grey;width:8%;padding:2.5 0 0 0;" id="a">&rsaquo;</a> 
 
</div> 
 

 
    

私はウェブサイトを作成していますし、携帯電話ではなく、デスクトップ上で見たりする場合にのみ、ブートストラップカルーセルの画像の下に表示されます。このホワイトスペースで立ち往生しています大画面。私はここに...

をGoogleで検索しているが、この問題への適切な答えはいくつかの助けを持っているのが大好きだ見つけることができません

は、CSSです：

.carousel-fade { 
    .carousel-inner { 
     .item { 
      transition-property: opacity; 
     } 

     .item, 
     .active.left, 
     .active.right { 
      opacity: 0; 
     } 

     .active, 
     .next.left, 
     .prev.right { 
      opacity: 1; 
     } 

     .next, 
     .prev, 
     .active.left, 
     .active.right { 
      left: 0; 
      transform: translate3d(0, 0, 0); 
     } 
    } 

    .carousel-control { 
     z-index: 2; 
    } 

} 





.carousel-fade { 
    .carousel-inner { 
     .item { 
      transition-property: opacity; 
     } 

     .item, 
     .active.left, 
     .active.right { 
      opacity: 0; 
     } 

     .active, 
     .next.left, 
     .prev.right { 
      opacity: 1; 
     } 

     .next, 
     .prev, 
     .active.left, 
     .active.right { 
      left: 0; 
      transform: translate3d(0, 0, 0); 
     } 
    } 

    .carousel-control { 
     z-index: 2; 
    } 
} 




html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item { 
    height: 100vh; 
} 

.item:nth-child(1) { 
} 

.item:nth-child(2) { 

} 

.item:nth-child(3) { 

} 

Answer 1

carousel- inner .itemはイメージのコンテナです。しかし、あなたが強制するまでイメージはその命題を破ることはありません。画像の高さ/幅の比率がピクセルを壊すことはありません。したがって、画像は、最大幅と最大可能高さをとり、高さと幅の比を同じに保ちます。

Answer 2

レスポンシブにしていますか？あなたがいるなら、私は次のことをお勧めします：

.tales { 
    width: 100%; 
} 
.carousel-inner{ 
    width:100%; 
    max-height: 200px !important; 
} 

しかし、応答し、これを処理するための最良の方法は、このようなのようなメディアクエリの使用を通して、次のようになります。

/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width: 959px) {} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) {} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) {} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) {}