Сделать так, чтобы изображение слайдера соответствовало 100% родительскому контейнеру

#html #css

#HTML #css

Вопрос:

У меня есть slider с Bootstrap. В XL версии показывает хорошо, но когда вы изменяете размер окна и справа container от текста увеличиваете его height , изображение не подходит для того, чтобы parent container адаптировать его height , чтобы сделать ту же высоту, что и container текст. Вы можете увидеть живой пример здесь, в средней части страницы.

Итак, в версии XL:

введите описание изображения здесь

Но если вы измените размер width окна, текст контейнера height увеличится, а не произойдет то же самое with с изображением слайдера, произойдет то, что:

введите описание изображения здесь

Теперь код:

   <div class="container-fluid mejores-instalaciones">
  <div class="row m-0">
    <div class="col-lg-9 col-md-12 col-sm-12 col-12 no-padding">
<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <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">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-2.jpg" alt="Jugando al tenis" title="Jugando al tenis"> 
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-3.jpg" alt="El comedor" title="El comedor">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-4.jpg" alt="La entrada" title="La entrada">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/mejores-instalaciones/slider/slider-mejores-instalaciones-5.jpg" alt="La biblioteca" title="La biblioteca">
    </div>
  </div>
 </div>
    </div>
    <div class="col-lg-3 col-md-12 col-sm-12 col-12">
        <h1 class="desc text-right">LAS MEJORES INSTALACIONES DE EXTREMADURA</h1>
      <p class="home-text-p text-right">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².</p>
    </div>
  </div>
</div>
  

Комментарии:

1. вы пробовали height:100% или background-size:cover для класса carousel в css

2. да, но не сработало

3. может быть, попробовать object-fit: fill с изображением?

4. Вместо отображения <img> тега, можете ли вы отобразить div изображение с изображением в качестве фона, а затем добавить background-size: cover; ?

5. @Code_Ninja Но это немного странно, потому что загрузочный слайдер обычно не создается с фоновыми изображениями, верно?