web-dev-qa-db-fra.com

Réglage et taille de l'image pour s'adapter à une div (bootstrap)

J'essaie d'obtenir une image pour correspondre à une taille spécifique div. Malheureusement, l'image ne s'y conforme pas et se réduit proportionnellement à une taille qui n'est pas assez grande. Je ne sais pas quel est le meilleur moyen d’obtenir l’image qui convient à l’intérieur.

Si ce n'est pas assez de code, je serais ravi d'en fournir plus et je suis disposé à réparer toute autre erreur que je ne saurais oublier.

Voici le HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

Mon CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}
htmlcsstwitter-bootstrap
84
smilefreak24

Vous pouvez définir explicitement les width et height des images, mais les résultats risquent de ne pas être optimaux.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

... par votre commentaire, vous pouvez aussi bloquer overflow - voir cet exemple pour voir une image limitée en hauteur et coupée car trop large.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}
53
jterry

Essayez de cette façon:

<div class="container"><div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

PDATE:

Dans Bootstrap 4 img-responsive devient img-fluid, la solution utilisant Bootstrap 4 est la suivante:

<div class="container"><div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
143
Shafeeque S

Juste une tête haute que Bootstrap 4 utilise maintenant img-fluid au lieu de img-responsive , vérifiez donc la version que vous utilisez si vous rencontrez des problèmes.

42
Alex

Ajoutez simplement la classe img-responsive à votre balise img, elle est applicable à partir de bootstrap 3!

32
Shashi

J'ai eu ce même problème et suis tombé sur la solution simple suivante. Il suffit d'ajouter un peu de remplissage à l'image et celle-ci se redimensionne pour s'adapter à la div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
7
wiltonio

Je l'ai utilisé et travaille pour moi.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
4
alanHdez

La plupart du temps, le projet bootstrap utilise jQuery, vous pouvez donc utiliser jQuery.

Obtenez simplement la largeur et la hauteur du parent avec JQuery.offsetHeight() et JQuery.offsetWidth(), et définissez-les sur l'élément enfant avec JQuery.width() et JQuery.height().

Si vous souhaitez le rendre réactif, répétez les étapes ci-dessus dans la $(window).resize(func).

2
Mohsen

Si l'un d'entre vous cherche Bootstrap-4. C'est ici

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
2
TheHive