移动屏幕上的bootstrap carousal下的空白区

Question

＆＃13;

＆＃13;

.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:

＆＃13;

  <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>

        

＆＃13;

＆＃13;

＆＃13;

我正在创建一个网站，我被困在这个空白区域，只有在手机上观看而不是在台式机或大屏幕上观看时才会出现在引导托架图像下面。

我用谷歌搜索但是找不到合适的答案可以帮助我找到一些帮助......

这是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) {}