Como ver el 100% de la imagen

[fedefrankk]

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:

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item img-fluid">
      <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/id/1027/200/300" class="d-block w-100 img-fluid" alt="..." >
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
 

css:

Código CSS:

body{
    font-family: 'Montserrat', sans-serif;
}
.f-color{
    color:#ffff !important
}
.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
  
  .card-img-top {
    width: 100%;
    height: 200px !important;
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
  }
 

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

[pzin]

El problema lo tienes aquí:

Código CSS:

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.