Dev Faq
-1
votes

Les images ne correspondent pas au carrousel dans Bootstrap 4

J'ai un carrousel avec des images. Mais les images sont montrées trop zoomées.

Voici mon code HTML: P> 

.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;
  object-fit: cover !important;
}

3 commentaires

Dupliqué possible de Image étirée dans le carrousel bootstrap

N'aide pas: / ..

Essayez d'utiliser au lieu de la taille de fond: couverture; utiliser contenir

4 Réponses :

1
votes

Vous pouvez comparer votre code avec ceci. Les images sont parfaitement zoomées ici.

mise à jour: supprimez la balise de style img code> du code CSS pour éviter le style global pour toutes les images simples. P>

P> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption d-none d-md-block">
        <h3>Third Slide</h3>
        <p>This is a description for the third slide.</p>
      </div>
      <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-none d-md-block">
        <h3>Third Slide</h3>
        <p>This is a description for the third slide.</p>
      </div>
      <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-none d-md-block">
        <h3>Third Slide</h3>
        <p>This is a description for the third slide.</p>
      </div>
      <img src="https://i.stack.imgur.com/8h5Xz.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

4 commentaires

idk pourquoi mais cela n'aide pas. Que se passe-t-il sur l'homme: / essayé tant de fois

Peut-être qu'il y a dans tout mon CSS Quelque chose ne va pas? Je le partage.

@Behar, j'ai mis à jour ma réponse. Soyez conscient des balises de style global telles que img dans votre code CSS, cela peut provoquer une confusion et des luttes indésirables. J'espère que c'est utile.

Pouvez-vous être plus spécifique par "images étirées"? S'il te plaît. Votre question portait sur cette image spécifique que vous avez attachée à votre question, qui ne s'affiche pas correctement. Ma réponse répond-elle à vos exigences par votre question?

0
votes

C'est mon ensemble de CSS: est ici peut-être peut-être quelque chose qui écrase? XXX

0 commentaires
0
votes

Je ne pense pas qu'il y ait un problème avec l'affichage du carrousel. Vous devez décider comment vous souhaitez afficher l'image dans le carrousel.

Il y a 2 options:

1) ne contraintes pas la hauteur du carrousel.

Si vous ne contraintes pas la hauteur du carrousel, toute l'image sera visible. Mais la hauteur sera très grande sur de grands écrans. Donc, à un moment donné, il est préférable de contraindre la hauteur du carrousel.

2) contraindre la hauteur du carrousel.

Comme je l'ai vu dans votre code, vous avez contraint la hauteur à 65vh . Lorsque vous contraindrez la hauteur de l'élément de carrousel, l'image peut être affichée dans

  • couvercle mode - l'image remplit le conteneur, mais peut être recadré si le rapport d'aspect est différent.
  • contient mode - l'image ne sera pas recadrée, l'image complète est affichée. Mais vous pouvez avoir des zones vides horizontalement ou verticalement à l'intérieur du conteneur en fonction du rapport de format.

    Comme je le vois dans votre code, vous avez utilisé Taille de l'arrière-plan: couvre , l'image est donc recadrée verticalement pour remplir la zone du conteneur.

    Pour plus de compréhension, vous pouvez visiter ci-dessous Publier sur Stackoverflow pour la manière dont les images sont positionnées dans couvercle ou contenant modes: https://stackoverflow.com/a/27941378/1266447

0 commentaires
0
votes

Vous devez ajouter arrière-plan-position: 50% 50%;

alors votre image est centrée.

Voici tout ici CSS CSS: xxx

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor