web-dev-qa-db-fra.com

Étirer l'image pour l'adapter à la largeur du conteneur

J'ai une image de 1300 pixels de large, en utilisant bootstrap, je souhaite que cette image remplisse toute la largeur de mon conteneur, qui est définie sur 1300 pixels. Je crée une ligne, lui donne 12 colonnes complètes, puis j'ajoute l'image avec une classe d'image sensible. Avec cette configuration, je reçois la sortie ci-dessous.

 enter image description here

Je veux que mon image s'étende jusqu'à l'endroit où mon image se trouve dans mon contenu, voici mon code. 

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

La largeur de l’image est de 100%, vous ne savez donc pas pourquoi elle ne remplit pas le conteneur.

htmlcssimagetwitter-bootstrap
8
pocockn

Vérifiez si cela résout le problème:

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

La classe Css no-padding remplacera le remplissage du conteneur d'amorçage par défaut.

Exemple complet ici .

18
sQer

Dans bootstrap 4.1, la classe w-100 est requise avec img-fluid pour les images plus petites que la page à étirer:

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

voir numéro fermé: https://github.com/twbs/bootstrap/issues/20830

(À compter du 2018-04-20, la documentation est erronée: https://getbootstrap.com/docs/4.1/content/images/ indique que img-fluid applique max-width: 100%; height: auto ; "mais img-fluid ne résout pas le problème, ni l’ajout manuel de ces attributs de style avec ou sans classes d’amorçage sur la balise img.)

17
poikilos

La classe container a un remplissage gauche et droit de 15 pixels, donc si vous souhaitez supprimer ce remplissage, utilisez la commande suivante, car la classe row a une marge gauche et droite de -15px.

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

Codepen: http://codepen.io/m-dehghani/pen/jqeKgv

2
Mehdi Dehghani

Tout d'abord, si la taille de l'image est inférieure à celle du conteneur, seule la classe "img-fluid" ne résoudra pas votre problème. vous devez définir la largeur de l'image sur 100%. Pour cela, vous pouvez utiliser la classe Bootstrap "w-100" . N'oubliez pas que les classes "container-fluid" et "col-12" fixent à gauche et à droite Les classes 15px et "row" définissent les marges gauche et droite sur "-15px" par défaut . assurez-vous de les mettre à 0.

Remarque: "Px-0" est une classe d'amorçage qui définit le remplissage à gauche et à droite sur 0 et
"mx-0" est une classe bootstrap qui définit les marges gauche et droite sur 0 

P.S. J'utilise la version Bootstrap 4.0. 

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>
0
user11023470