使图像变得绝对混乱（Ruby on Rails）

Question

我正在尝试使用带有文本的图像创建一个 Bootstrap 轮播。为此，我需要将图像在轮播中的位置设为绝对位置。这是在我将其设为绝对之前轮播中的图像

我需要推荐信，这是图片上的洛杉矶文字。所以我把它设为绝对，这会发生

而且无论我做什么，我似乎都无法修复它。

这是我的 Slim 标记

.container#testimonialsSection
    .carousel.slide#testimoniesCarousel data-ride="carousel"
      ol
        li data-target="#testimoniesCarousel" data-slide-to="0" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="1" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="2" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="3" class="active"
        li data-target="#testimoniesCarousel" data-slide-to="4" class="active"
      .carousel-inner role="listbox"
        .item.active
          = image_tag("losangelesskyline.jpg", :class => "img-responsive")
          h2.center Testimonials
          p This is LA
        .item
          = image_tag("newyorkskyline.jpg")
          p This is NY
        .item
          = image_tag("miamiskyline.jpg")
          p This is Miami
        .item
          = image_tag("bostonskyline.jpg")
          p This is Boston
        .item
          = image_tag("atlantaskyline.jpg")
          p This is Atlanta
      a.left.carousel-control href="#testimoniesCarousel" role="button" data-slide="prev" onclick=""
        span.glyphicon.glyphicon-chevron-left aria-hidden="true"
        span.sr-only Previous
      a.right.carousel-control href="#testimoniesCarousel" role="button" data-slide="next" onclick=""
        span.glyphicon.glyphicon-chevron-right aria-hidden="true"
        span.sr-only Next

这是我的 SCSS

.carousel-control.left, .carousel-control.right {
    background-image: none
}

#testimonialsSection {
    height: 70%;
    width: 100%;
}

#testimoniesCarousel {
    width: 100%;
    height: 100%;

    h3 {
        font-size: 300%;
    }
    p {
        text-align: center;
        margin-left: 5%;
        margin-right: 5%;
        font-size: 200% !important;
    }
    img {
        position: absolute;
        height: 70%;
        width: 100%;
    }
    .carousel-control.left .glyphicon {
        position: absolute;
        left: 0;
        top: 35%;
        margin-left: 0;
        color: #D6D6D6;
    }
    .carousel-control.right .glyphicon {
        position: absolute;
        right: 0;
        top: 35%;
        margin-right: 0;
        color: #D6D6D6;
    }
}

任何帮助将不胜感激。

Answer 1

实际上，我只记得它会随着内容的数量而变化。一旦我将文本添加到其中，图像就会扩展。现在可以使用了