Foros del Web » Creando para Internet » CSS »

Como ver el 100% de la imagen

Estas en el tema de Como ver el 100% de la imagen en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 26/03/2022, 16:59
Avatar de 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
  #2 (permalink)  
Antiguo 08/05/2022, 12:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Como ver el 100% de la imagen

El problema lo tienes aquí:

Código CSS:
Ver original
  1. background-size: cover;

Con eso le dices que siempre cubra con la imagen el fondo, que es exactamente lo que ocurre.

La solución es o bien cambiar ese comportamiento, añadir otra imagen de fondo a partir de cierto tamaño del viewport, o cambiar las dimensiones del slider al alcanzar cierto tamaño.
__________________
(:



La zona horaria es GMT -6. Ahora son las 22:44.