weißer Raum unter Bootstrap carousal auf mobilen Bildschirm

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> 
 

 
    

Ich erstelle eine Website und bin an diesem weißen Raum stecken, die nur unter dem Bootstrap carousal Bild erscheint, wenn auf dem Handy sehen, aber nicht auf Desktops oder große Bildschirme.

Ich habe gegoogelt aber keine angemessene Antwort auf dieses Problem finden würde gerne etwas Hilfe haben ...

hier ist die 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

Karussell- inneres .item ist der Container des Bildes. Aber das Bild wird seinen Satz nicht brechen, bis Sie es erzwingen. Verhältnis der Höhe/Breite des Bildes wird nicht überschreiten, um seine Pixel zu brechen. Das Bild nimmt also die maximale Breite und die maximal mögliche Höhe ein, wobei das Verhältnis von Höhe und Breite gleich bleibt.

Answer 2

Versuchen Sie es reaktionsfähiger zu machen? Wenn Sie dann würde ich empfehlen, gerade folgend:

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

Allerdings ist der beste Weg, dies zu handhaben als Reaktion durch die Verwendung von Medienanfragen wäre wie so:

/* 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) {}