使圖像絕對混亂起來（Ruby on Rails）

-1

我正在試圖創建一個帶有文本的圖像的Bootstrap旋轉木馬。爲此，我需要將旋轉木馬中的圖像的位置絕對化。這裏是一個圖像中的旋轉木馬前，我把它絕對使圖像絕對混亂起來（Ruby on Rails）

我需要的見證，這是LA文本在圖像上。所以，我讓它絕對和發生這種情況

而且不管我做什麼，我似乎無法修復它。

這是我修身標記

.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; 
    } 
}

任何幫助將不勝感激。

來源

2016-11-17 Nick Gilbert