Bootstrap轮播 - 底部空间与宽图像

时间:2015-07-17 08:32:09

标签: css twitter-bootstrap-3 carousel

图像为800 * 450,问题出在图片中。该问题不会出现(例如)320×455图像 Here what happen

这是轮播的玉代码

.col-md-12.col-xs-12
    #header-carousel.carousel.slide(data-ride="carousel", data-interval="5000")
        .carousel-inner
            each image, i in content.images
                if i === 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

这里是自定义CSS

.carousel-inner > .item > img,
  .carousel-inner > .item > a > 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;
}

如何删除灰色部分?

1 个答案:

答案 0 :(得分:0)

我有这个问题,尝试在图片标签中添加图片宽度和高度的属性。 像这样:

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