Ajustement et taille de l'image pour s'adapter à un div (bootstrap)

97

J'essaie de faire en sorte qu'une image tienne dans un div de taille spécifique. 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 quelle est la meilleure façon de faire en sorte que l'image s'intègre à l'intérieur.

Si ce code ne suffit pas, je serais heureux d'en fournir plus et je suis prêt à corriger toute autre erreur que je néglige.

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;


}
html css twitter-bootstrap smilefreak24
la source
J'ai publié une réponse à une question similaire ici: stackoverflow.com/questions/41870216/…
FredyWenger

Réponses:

57

Vous pouvez définir explicitement le widthet heightdes images, mais les résultats peuvent ne pas être les meilleurs.

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

jsFiddle

... par votre commentaire, vous pouvez également bloquer n'importe quel overflow- voir cet exemple pour voir une image restreinte par la hauteur et coupée parce qu'elle est trop large.

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

.top1 img {
    height:100%;
}
jterry
la source
J'ai envisagé de faire cela, malheureusement, comme vous l'avez dit, les résultats ne sont pas les meilleurs. Idéalement, j'aimerais que les images soient réduites afin que la hauteur de l'image corresponde à la hauteur du div et que la largeur de l'image qui dépasse la largeur du div contraignant soit masquée. Si cela fait sens
smilefreak24
Oui c'est ce que je recherche! Merci beaucoup!
smilefreak24
La réponse AUTRE est la meilleure, ajouter simplement class = "img-responsive" à la balise img fait l'affaire!
iMobaio
1
mieux width:100%;est max-width:100%;et mieux tout est classe img-responsiveen BS3 ou img-fluiden BS4.
Nabi KAZ
167

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>

METTRE À JOUR:

Dans Bootstrap 4 img-responsivedevient img-fluid, donc la solution utilisant Bootstrap 4 est:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>
Shafeeque S
la source
5
Cool! class = "img-responsive" a aidé. Cela devrait peut-être être la réponse acceptée aujourd'hui.
Anupam
1
class = "img-responsive" est définitivement la voie à suivre! Cela devrait être la réponse acceptée.
iMobaio
28
c'est img-fluidmaintenant, pasimg-responsive
mots pour
32

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

Shashi
la source
Désolé mais pouvez-vous être précis, je ne reçois pas votre question correctement, merci!
Shashi
7

J'ai eu ce même problème et je suis tombé sur la solution simple suivante. Ajoutez simplement un peu de remplissage à l'image et elle se redimensionne pour s'adapter au div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
Wiltonio
la source
1
Résolu AVEC Bootstrap plutôt que CSS personnalisé. Je vous remercie.
mattgreen
7

Je l'ai utilisé et fonctionne pour moi.

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

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>
Dexter
la source
ce n'est pas la solution idéale si vous avez une autre colonne avec du texte car elle sera également dure contre le bord de la bordure
James Burke
2

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 également les étapes ci-dessus dans le $(window).resize(func).

Mohsen
la source