앵귤러 UI 부트 스트랩 캐 러셀 전체 화면

Question

현재 앵귤러 UI 부트 스트랩 캐 러셀을 내 페이지의 전체 길이로 만들려고합니다. 가장 바깥 쪽 div에 있지만 페이지의 너비 만 확장하고 다음 div의 시작 부분에서 수직으로 멈 춥니 다. 여기

는 CTRL (단지 어레이의 이미지를 저장하는) 여기서

$scope.myInterval = 5000; 


var slides = $scope.slides = [ 
    { image:"http://www.bestfon.info/images/joomgallery/originals/animales_7/dog_with_glasses_20140320_2017987799.jpg" 
}, 
{ 
    image:"http://www.animalpictures1.com/data/media/177/dog_2560x1440.jpg" 
} 
    ]; 

은 (컨베이어는 상단이지만 DIV 그 안에이 매우 하단 폐쇄)

<div> 
<carousel interval="myInterval" id="carouselID"> 
     <slide ng-repeat="slide in slides" active="slide.active"> 
     <img ng-src="{{slide.image}}"> 

     </slide> 
    </carousel> 
<div class="container-fluid"> 

    <div class="row"> 
    <!-- <div class="col-md-12"> 
    <img src="../images/barkIT.png" alt=""> 
    </div> --> 
    <div class="col-md-12" id="profileIMG"> 
    <img src="{{owner.image}}" alt=""> 
    </div> 
    <div class="col-md-12"> 
    <h1>{{owner.name}}</h1> 
    </div> 
    <div class="col-md-12" id="contactInfo"> 
    <p><img src="../images/email.png" alt="">{{owner.email}} <img src="../images/telephone_black.png" alt="">{{owner.phone}}</p> 

    </div> 
    <div class="col-md-12" id="socialNav"> 
    <a href="https://twitter.com/{{owner.twitter}}"><img src="../images/Twitter-icon.png" alt=""></a> 
    <a href="https://instagram.com/{{owner.instagram}}"><img src="../images/Instagram-icon.png" alt=""></a> 
    </div> 
    <div class="col-md-12"> 
    <a href="#/owners/{{owner._id}}/edit">Edit Profile</a> | <a ng-click="deleteOwner(owner._id)">Delete Profile</a> 
    </div> 
    </div> 

<hr> 
<div> 
    <div class="col-md-12" id="dogTag"> 
    <img src="../images/tag_add.png" alt="" ng-click="dogAdd = true"> 
    </div> 
    <div class="col-md-12" ng-show="dogAdd"> 
    <form ng-submit="createDog(newDog)"> 
    <!-- <div class="col-md-3"> --> 
     <input type="text" data-ng-model="newDog.name" placeholder="Name"> 
    <!-- </div> --> 
    <!-- <div class="col-md-3"> --> 
     <input type="url" ng-model="newDog.image"placeholder="Image URL"> 
    <!-- </div> --> 
    <!-- <div class="col-md-3"> --> 
     <input type="text" ng-model="newDog.type" placeholder="Breed"> 
    <!-- </div> --> 
    <!-- <div class="col-md-3"> --> 
     <input type="number" ng-model="newDog.weight" placeholder="Weight"> 
    <!-- </div> 
     </div> --> 
    <!-- <div class="col-md-12"> --> 
     <button type="submit" ng-click="dogAdd = false">Create</button> 
    <!-- </div> --> 
    </form> 
</div> 
<div id="dogCard" class="col-md-12"> 

<div ng-repeat="dog in dogs"> 
    <div class="col-md-4"> 
    <h3>{{dog.name}}</h3> 
    <p>{{dog.type}}</p> 
    <p>{{dog.weight}}</p> 
    </div> 


    <div class="col-md-4" id=dogProfileIMG> 
    <img src="{{dog.image}}" alt=""> 
    </div> 
    <div class="col-md-4"> 
    <h3><u>Reminders</u></h3> 
    <div id="reminderList" ng-repeat="reminder in dog.reminders"> 
    <ul> 
    <li><img src="../images/paw.png" alt="">{{reminder}}</li> 
    </div> 
<button ng-click="reminderAdd = true">Add Reminder</button> 
<form ng-submit="createReminder(dog, reminder)" ng-show="reminderAdd"> 
    <input type="text" ng-model="reminder" placeholder="Enter Reminder"> 
    <button type="submit" ng-click="reminderAdd = false">Add Reminder</button> 
</form> 
    </div> 
    <hr> 
</div> 
</div> 
</div> 
</div> 
</div> 

되는 HTML이다 여기

내가

#carouselID{ 
height:100%; 
img{ 
    width:100%; 
    opacity:.7; 
} 

Answer 1

안녕 회전 목마 높이가 아마 이미지의 높이로 제한되어있는 CSS입니다. 페이지의 더 많은 부분을 채우려면 이미지를 더 크게해야합니다.