Image sensible dans le bootstrap pour remplir la colonne

J'ai un bootstrap colonne définie comme suit:

<div class="col-md-4 limit">
    <img id="myImage" src="" class="img-responsive"/>
</div>

<style>
    .limit {
        max-height:500px;
        overflow:hidden;  
    }
</style>

La source de l'image est obtenue par programmation donc je ne sais pas à l'avance la hauteur ou la largeur de mon image. Ce que je veux faire, c'est que l'image dans cette colonne dont la hauteur est limitée apparaissent complètement à l'intérieur de la div. Avec le img-responsive classe, j'ai réalisé l'image à l'horizontale remplir ma colonne, cependant, que cette classe définit la hauteur de l'auto, la plupart du temps ce qui fait que l'image de débordement et être caché. Je ne veux pas que mon image à débordement en aucune façon.

Donc, disons que ma colonne mesures:

  • Width: 300px (défini par bootstrap)
  • Height: 500px (.la limite)

Et mon image dimensions sont les suivantes:

  • Width: 600px
  • Hauteur: 1500px

La configuration actuelle de l'image, se réduisent à 300px x 750px. Comme son conteneur est définie uniquement sur 500px, ce qui provoque le dernier 250px être perdu à l'intérieur de la zone de débordement. Je voudrais une image au lieu d'être redimensionnée à 200px x 500px pour complètement dans le div contenant

Comment puis-je faire cela?
Merci!

InformationsquelleAutor Luis Becerril | 2015-07-02
  1. 1

    Essayez ceci:

    <div class="row">
    <div class="col-md-4">
        <div class="limit">
            <img src="images/yourimage.png" alt="" />
        </div>
    </div>
</div>

<style type="text/css">
    .limit{
        width: 300px;
        height: 500px;
        max-height: 500px;
        overflow: hidden;
     }
    .limit img{
       width: 100%;
       height: 100%;
     }
 </style>
    • Merci. Cependant je n'ai pas besoin de définir la largeur de la limite div parce que c'est contrôlée par bootstrap. Aussi, a changé le img classe de max-width et max-height. .limite { width: 100%; height: 500px; max-height:500px; overflow:hidden; } .limite img { max-width: 100%; max-height: 100%; }
    InformationsquelleAutor dianne_ldrs
  2. 1

    @Luis Becerril je normalement utilisé ce plugin avec ce genre de questions. S'il vous plaît essayer cette. Si cela peut convenir à vos besoins. jQuery Centre de l'Image

    • Très pratique plugin! Merci!
    • Vous êtes les bienvenus @LuisBecerril
    InformationsquelleAutor nithin
  3. 0

    Vous pourriez essayer d'hériter de la hauteur ou de la largeur de la div parent (comme les deux ne contiendrait pas les proportions). Cela ne peut fonctionner que si vous avez le même type d'img (tous les portret ou paysage). Autre solution consiste à calculer les dimensions en fonction de la largeur/hauteur de l'img dans votre programme de langue. Choisissez celle qui correspond à la condition (deux var <= valeur max). Puis l'écho de la solution dans votre code html.

    InformationsquelleAutor Olivier