html - 移动屏幕上引导轮播下的空白

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>

        

我正在创建一个网站并卡在这个空白区域，该空白区域仅在手机上查看时出现在引导轮播图像下方，但在台式机或大屏幕上不显示。

我用谷歌搜索但找不到这个问题的合适答案希望得到一些帮助...

这是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是图片的容器。但是除非你强制它，否则图像不会破坏它的命题。图像的高/宽比不会超过像素。因此图像将采用最大宽度和最大可能高度，保持高宽比相同。