css - Bootstrap carousel - space on bottom with wide images -

the image 800*450, , problem 1 in picture. problem doesn't appear (for example) 320 × 455 images

this jade code carousel

.col-md-12.col-xs-12     #header-carousel.carousel.slide(data-ride="carousel", data-interval="5000")         .carousel-inner             each image, in content.images                 if === 0                     .item.active                     img(src="#{image}", alt="phone")                 else                     .item                     img(src="#{image}", alt="phone")         a.left.carousel-control(href="#header-carousel", data-slide="prev")             span.icon-prev         a.right.carousel-control(href="#header-carousel", data-slide="next")             span.icon-next 

here custom css

.carousel-inner > .item > img,   .carousel-inner > .item > > img {     width: 100%;     margin: 0 auto;     padding: 0px !important; }  .carousel-control .glyphicon-chevron-left, .carousel-control     .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {   width: 100px;   padding: 0px !important;   margin: 0px !important; } 

how remove grey part?

i had issue, try add, in image tag, attributes width , height of image. this:

 img(src="#{image}", alt="phone", width="800", height="450")