title: Make image of slider fit 100% parent container
body: <p>I have an <code>slider</code> with Bootstrap. In the <code>XL</code> version shows good, but when you resize the Window and the right <code>container</code> of text grow his <code>height</code>, the image didn't fit the <code>parent container</code> to adapt his <code>height</code> to make the same height that the <code>container</code> text. You can see an live example <a href="http://residenciarucab.es/rucab/" rel="nofollow noreferrer">here</a>, in the middle section of the page.</p>
  
  <p>So, in the XL version:</p>
  
  <p><a href="https://i.stack.imgur.com/5LYdQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5LYdQ.png" alt="enter image description here"></a></p>
  
  <p>But if you resize the <code>width</code> of the Window, the container text's <code>height</code> grow, not happens the same <code>with</code> the image of the slider, happening that:</p>
  
  <p><a href="https://i.stack.imgur.com/OZI3L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OZI3L.png" alt="enter image description here"></a></p>
  
  <p>Now the code:</p>
  
  <pre><code>  &lt;div class="container-fluid mejores-instalaciones"&gt;
    &lt;div class="row m-0"&gt;
      &lt;div class="col-lg-9 col-md-12 col-sm-12 col-12 no-padding"&gt;
  &lt;div id="carouselExampleControls2" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-1.jpg" alt="Niñas haciendo yoga" title="Niñas haciendo yoga"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-2.jpg" alt="Jugando al tenis" title="Jugando al tenis"&gt; 
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-3.jpg" alt="El comedor" title="El comedor"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-4.jpg" alt="La entrada" title="La entrada"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-5.jpg" alt="La biblioteca" title="La biblioteca"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-12 col-sm-12 col-12"&gt;
          &lt;h1 class="desc text-right"&gt;LAS MEJORES INSTALACIONES DE EXTREMADURA&lt;/h1&gt;
        &lt;p class="home-text-p text-right"&gt;La RUCAB es un referente en Extremadura desde hace 32 años, cuanta con el mayor numero de plazas, un total de 205, repartidas en 36 habitaciones dobles, 132 habitaciones individuales y una habitación adaptada. La construcción se extiende por una amplia zona ajardinada, con seis edificios o núcleos residenciales, además de los edificios de las zonas comunes. El total de superficie construida es de 8.492 m².&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>