2

¿Cómo puedo hacer para que las imágenes (img) que pongo en el carousel de Bootstrap, se muestren dentro del background del div class="container-fluid prueba", de forma que tome las medidas de este div?

<div class="container-fluid prueba">
    <div class="row carousel-holder">
         <div class="col-md-12">
                 <div id="carousel-example-generic" class="prueba-slide carousel slide" data-ride="carousel">
                     <ol class="carousel-indicators">
                           <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                           <li data-target="#carousel-example-generic" data-slide-to="2"></li>

                          </ol>

                             <div class="carousel-inner">
                                 <div class="item active" style="background:url(img/c1.jpg) center center;">
                                      <div class="carousel-caption">
                                               <h1>IMAGEN 01</h1>
                                       </div>
                                    </div>
                                    <div class="item" style="background:url(img/c2.jpg) center center;"></div>
                                    <div class="item" style="background:url(img/c3.jpg) center center;"></div>

                              </div>
                              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                  <span class="glyphicon glyphicon-chevron-left"></span>
                              </a>
                              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                  <span class="glyphicon glyphicon-chevron-right"></span>
                              </a>
                          </div>
                   </div>
            </div>
       </div>
   </div>
3
  • Agrega tu codigo completo para poder ayudarte mas facilmente, no olvides usar {} para que se marque como codigo. Saludos Commented el 11 jun. 2016 a las 4:21
  • Joel, tal vez te sirva la repuesta que di a un pregunta similar en la version anglo. ver Aquí
    – user10892
    Commented el 23 jul. 2016 a las 8:17
  • No tengo precisamente claro como se crearía esa parte de código, pero yo te aconsejaría que vieras un pequeño video de como dar el atributo de "adaptable" a la imagen, hace algunos años yo tenía un problema parecido con un div que era mas grande que el que lo contenía, pero con el atributo adaptable logré solucionar ese problema.
    – Gabriel
    Commented el 14 sept. 2018 a las 17:45

3 respuestas 3

3

Ten en cuenta, que si tienes imágenes grandes y/o algo pesadas, quizás quieras hacer un cargado tardío (lazy loading), y la mejor forma es hacerlo por medio del tag img, en lugar de background-url.

.item {
      display: block;
      width: 100%;
      height: 200px;
}
.item img {
      height: 100%;
      width: 100%;
}
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <div class="carousel">
      <div class="item">
           <img src="http://www.wow247.co.uk/wp-content/uploads/2013/03/Up-greatest-animated-movies.jpg" />
      </div>
    </div>
 

2

Podrias definir las propiedades de la imagen con with = 100% pero personalmente recomiendo usar la imagen como fondo del div donde tienes mas propiedades para ajustar el tamaño, por ejemplo :

.item {
      display: block;
      width: 100%;
      height: 200px;
      background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350×150&w=350&h=150');
      background-position: center;
      background-repeat: non-repeat;
      background-size: cover;
    }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <div class="carousel">
      <div class="item"> </div>
    </div>
 

1
  • gracias por tu ayuda lo intentaré soy algo nuevo en eso jeje saludos Commented el 11 jun. 2016 a las 4:45
1

Siempre que uso bootstrap me funciona lo siguiente para ajustar las imagenes al tamaño del carousel intentalo y veras como funciona!

.carousel-inner > .item > img {
  object-fit: scale-down;
  height: 50vh;
  width: 100%;
}

Esto ajusta la imagen al tamaño del carousel la coloca del 50% del alto de la pantalla y el 100% del ancho.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.