Изменение размера изображения на всю высоту страницы при изменении размера окна

Question

Я пытаюсь создать отзывчивую страницу с помощью начальной загрузки 3.4. У меня есть несколько angularjs также на той же странице. Левая сторона - это изображение, а правая часть - это некоторый контент. моя проблема - изображение не отзывчиво. изначально он идет с вертикальной полосой прокрутки. когда я изменяю размер окна, в какой-то момент изображение становится меньше содержимого правой стороны.

Это моя первая работа по начальной загрузке. любая помощь приветствуется.

! [Макет экрана] [1]

[окно с измененным размером] [2]

<div class="container-fluid" >
   <div class="row">   

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding-left:0px!important">  
<div >
  <div ng-controller="SPSlideController" data-ng-init="loadSliderItems()"  >

      <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <div style="overflow: hidden;">
 <!-- Dot Indicators and Image Selectors -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" ng-repeat="img in slides" ng-class="{active : ($index+1 === 1)}" data-slide-to="{{$index}}"> <img src="HPImages/spacer.png"/>0{{$index+1}} 
 <div ng-show="{($index+1 === 1)}"><b style="font-size: 20px">{{img.Title}}</b><br>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit..  
 </div><br>
 </li>
 </ol>  
 </div>
 <!-- Images to be displayed -->
 <div class="carousel-inner">
 <div ng-class="{item: true, active : ($index+1 === 1)}" ng-repeat="img in slides"> 
 <div >
 <img ng-src="{{img.Imageurl}}" alt="Slide numder {{$index}}" class="slides 100vh"/>
 </div>
 </div>
 </div>
   </div>   
    </div>
</div>
</div>
</div>
</div> ```




  [1]: https://i.stack.imgur.com/CxWlI.png
  [2]: https://i.stack.imgur.com/SKk58.png