Ajuster la taille d'une image à un div (bootstrap)

Question

J'essaie de faire tenir une image dans une division de taille spécifique. Malheureusement, l'image ne s'y conforme pas et rétrécit proportionnellement à une taille qui n'est pas suffisante. Je ne suis pas sûr de la meilleure façon de procéder pour faire tenir l'image à l'intérieur de la division.

Si ce n'est pas assez de code, je serais heureux d'en fournir plus, et je suis ouvert à la correction de 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;

}

Answer 1

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>

UPDATE :

Dans Bootstrap 4 img-responsive devient img-fluid La solution en utilisant Bootstrap 4 est donc la suivante :

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

Answer 2

Vous pouvez définir explicitement le width y height d'images, mais les résultats ne sont pas forcément les plus beaux.

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

jsFiddle

---

...selon votre commentaire, vous pourriez aussi simplement bloquer tout overflow - voir cet exemple pour voir une image limitée 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%;
}

Answer 3

Je vous informe que Bootstrap 4 utilise désormais img-fluid au lieu de img-responsive Si vous avez des problèmes, vérifiez la version que vous utilisez.

Answer 4

Il suffit d'ajouter la classe img-responsive a su img il est applicable à partir de bootstrap 3 !

Answer 5

J'ai utilisé ceci et ça marche pour moi.

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