Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/03/2022, 16:59
Avatar de fedefrankk
fedefrankk
 
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 15 años
Puntos: 7
Pregunta Como ver el 100% de la imagen

Hola a todos, Buenas tardes, esto haciendo un navbar con boostrap 5, y un slider,

cuando el slider esta en el móvil se ve bien, no se corta la imagen, pero cuando esta en pantalla completa, se corta... he copiado un código css, que creo que es el problema.
pero si lo saco cuando la pantalla esta al 100%, la imagen ocupa toda la pantalla..
no se como hacerlo..

codigo :
Código HTML:
Ver original
  1. <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  2.   <div class="carousel-inner">
  3.     <div class="carousel-item active">
  4.       <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100" alt="...">
  5.     </div>
  6.     <div class="carousel-item img-fluid">
  7.       <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100" alt="...">
  8.     </div>
  9.     <div class="carousel-item">
  10.       <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100 img-fluid" alt="..." >
  11.     </div>
  12.   </div>
  13.   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  14.     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  15.     <span class="visually-hidden">Previous</span>
  16.   </button>
  17.   <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  18.     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  19.     <span class="visually-hidden">Next</span>
  20.   </button>
  21. </div>

css:
Código CSS:
Ver original
  1. body{
  2.     font-family: 'Montserrat', sans-serif;
  3. }
  4. .f-color{
  5.     color:#ffff !important
  6. }
  7. .carousel-item {
  8.     height: 65vh;
  9.     min-height: 300px;
  10.     background: no-repeat center center scroll;
  11.     -webkit-background-size: cover;
  12.     -moz-background-size: cover;
  13.     -o-background-size: cover;
  14.     background-size: cover;
  15.   }
  16.  
  17.   .card-columns .card {
  18.     display: inline-block;
  19.     width: 100%;
  20.   }
  21.  
  22.   .card-img-top {
  23.     width: 100%;
  24.     height: 200px !important;
  25.     border-top-left-radius: calc(0.25rem - 1px);
  26.     border-top-right-radius: calc(0.25rem - 1px);
  27.   }

desde ya muchas gracias..
dejo la web
https://www.atk20.com/01/index.php