Estoy realizando un Carousel pero a la hora de hacerlo responsive no se muestra la imagen completa al poner el navegador en modo responsive, si se adapta al tamaño movil pero solo se muestra un pequeño pedazo de la imagen, es posible que la imagen se muestre completa a la vez que se adapte al tamaño movil? Este es mi codigo de mi carousel:
<div class="col-lg-6 auto mt-3">
<div class="carousel slide" id="principial-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#principial-carousel" data-slid-to="0" class="active"></li>
<li data-target="#principial-carousel" data-slid-to="1"></li>
<li data-target="#principial-carousel" data-slid-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imagenes/1.jpg" alt="">
</div>
<div class="carousel-item">
<img src="imagenes/2.jpg" alt="">
</div>
<div class="carousel-item">
<img src="imagenes/3.jpg" alt="">
</div>
</div>
<a href="#principial-carousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#principial-carousel" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
html
), pero puedes agregar loscss
o armar untest
para que podarmos replicarlo.Bootstrap
estás usando. Mientras tanto, puedes probar agregando esta clase:<img src="..." class="img-fluid" alt="Responsive image">
y en tuCSS
deberías tener esto:.img-fluid{ max-width: 100%; height: auto;}
.img-fluid
. Cuéntanos cómo te va con eso.