1
votes

L'image ne rétrécit pas correctement

J'ai donc une image d'arrière-plan qui, lorsque le navigateur occupe tout l'écran, s'affiche correctement. Pendant que je réduis la fenêtre du navigateur, l'image se rétrécit jusqu'à un certain point, puis elle s'arrête soudainement. Voici ce qui se passe:

Je n'ai qu'un Fichier .CSS contenant:

<div class="fondo img-fluid"></div>

Et le fichier .html a:

.fondo {
  width: 100%;
  height: auto;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url("src/assets/images/fondo.png");
  background-size: cover;
  background-position: center center;
}

html css bootstrap-4

0 commentaires

3 Réponses :

-1
votes

Je pense que cela devrait être background-position: center;

0 commentaires

0
votes

J'utilise toujours ceci pour les images d'arrière-plan réactives

Selector{
  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

Mais parfois je suis aussi confronté à ce problème Ensuite, j'utilise @media et je définis la taille manuellement aux points d'arrêt ou je crée un arrière-plan avec ce qui n'est pas possible dans votre cas Meilleures salutations

0 commentaires

0
votes

Ce dont vous avez besoin est la hauteur en vh et la largeur en vw :

fiddle pour jouer.

<div class="fondo img-fluid"></div>

.fondo {
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-image: url("http://placekitten.com/301/301");
  background-size: cover;
  background-position: center center;
}

0 commentaires