web-dev-qa-db-fra.com

Bootstrap 3 images sensibles côte à côte de même hauteur

Est-il possible d’utiliser deux images sensibles côte à côte de même hauteur avec Bootstrap 3 ? Pour le moment, le col-sm-4 n'a pas la même hauteur.

<div class="container">
    <div class="row">                                     
        <div class="col-sm-4">                 
            <img class="img-responsive" src="http://placehold.it/400x400" />
        </div>                  
        <div class="col-sm-8">
            <img class="img-responsive" src="http://placehold.it/800x400" />
        </div>                  
    </div>
</div>

Demo Fiddle:http://jsfiddle.net/u9av6/3/

Merci!

csstwitter-bootstraphtmltwitter-bootstrap-3
22
l00per

essaye ça:

<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>

<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
14
wpdaniel

voici ma solution avec un simple wrapper. L’idée est de traiter le format de l’image:

jsfiddledemo

6
foxdie

Voici une version de travail, avec jsfiddle demo .

<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>                       
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
3
wpdaniel

Peut-être que votre problème est que dans votre code, le remplissage ne prend pas en compte.

Votre 400px et 800px est agréable, mais avec un rembourrage, ce n'est pas bon. 

Dans ce violon: http://jsfiddle.net/Lrc5t/1/ , sans rembourrage, ils conservent la même hauteur. Mais ce n'est pas Nice sans rembourrage ...

Le remplissage dans chaque .row est 15px à gauche et à droite.

html: 

<div class="row">                   
    <div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>                       
    <div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>              
</div>

css:

.nopadding{
    padding-left: 0px !important;
    padding-right:0px !important;    
}

METTRE À JOUR : 

fiddle: http://jsfiddle.net/Lrc5t/2/

Si le rembourrage n’est pas agréable, il faut inverser l’inverse pour ajouter du rembourrage à la bonne image:

<div class="row">

<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>

<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>

</div>

.nopadding-two{
    padding-right:45px !important;
}

ps: Vous pouvez choisir d'ajouter votre remplissage à gauche ou à droite ... afin de conserver le remplissage au milieu. Et ... les classes nopadding-one et text-right sont à supprimer ... (j'ai oublié) ...

UPDATE APRÈS COMMENTAIRE: * Pourquoi 45px? *Image 1 est float: à gauche de sorte qu'elle n'a que le padding-right à 15px L'image 2 a un remplissage gauche et droit à 15px {= 30px} Donc, pour que l'égalité (afin d'obtenir les mêmes contraintes), vous devez transmettre le remplissage total à l'image 2 _

1
Pimento Web

Vérifiez ce code. Ce code cherchera la plus petite hauteur de l'image et le définira comme hauteur maximale des autres images. Le reste de l'image sera caché. Vérifiez-le. 

<script>
   setTimeout(function () {
      equalheight('.portfolio-item');
   }, 3000);
   function equalheight($that) {
      $minHeight = 0;
      $($that).each(function (index) {
         $thisHeight = $(this).children('.portfolio-link').innerHeight();
         if ($minHeight == 0) {
            $minHeight = $thisHeight;
         } else {
            if ($minHeight > $thisHeight) {
               $minHeight = $thisHeight;
            }
         }
      });
      $($that).children('.portfolio-link').css('max-height', $minHeight);
      $($that).children('.portfolio-link').css('overflow', 'hidden');
   }
</script>

Mon html est 

                <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-01.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Round Icons</h4>
                     <p class="text-muted">Graphic Design</p>
                  </div>
               </div>
               <div class="col-md-4 col-sm-6 portfolio-item">
                  <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
                     <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                           <i class="fa fa-plus fa-3x"></i>
                        </div>
                     </div>
                     <img src="images/trip-02.jpg" class="img-responsive" alt="">
                  </a>
                  <div class="portfolio-caption">
                     <h4>Startup Framework</h4>
                     <p class="text-muted">Website Design</p>
                  </div>
               </div>
0
Eugine Joseph

Pour que les images s'affichent côte à côte, vous devez effectuer trois opérations:

1st : rendez toutes vos images réactives dans le fichier html comme ceci: 

<div class="row">

      <div class="col-xs-3 left-image"  >

        <img  class="img-responsive" src="../img/fourthimg.jpg">
      </div>
      <div class="col-xs-9 right-image">

          <img class="img-responsive" src="../img/firstimg.jpg" >

     </div>

    </div>

C'est pour mettre deux images côte à côte. Vous pourriez avoir autant d'images que possible.

2nd: Dans votre css, donnez la hauteur à ces images comme ceci:

   .img-responsive {display:block; height: 600px; width: 100%;}

La largeur est définie sur 100%, ce qui signifie que les deux (pour cet exemple)/toutes les images couvriraient la partie à 100% de la largeur de la colonne fournie dans votre code html.

3rd (Le plus important): CSS possède cette propriété pour laisser automatiquement des marges/marges à droite et à gauche lorsque vous insérez une image dans un div. un div. 

Pour résoudre ce problème, allez dans votre fichier css et pour chaque image, définissez le remplissage à gauche et le remplissage à droite sur 0px comme ceci:

.right-image{
padding-left:0px;
padding-right:0px;

}


.left-image{

 padding-right: 0px;
 padding-left: 0px;


}

Ceci est un exemple de travail et une explication de la façon de mettre des images côte à côte à l’aide de bootstrap!

0
Shubham

si vous voulez une hauteur constante, vous devriez ajouter les propriétés suivantes:

height: 200x ;   # any constant height
object-fit: cover;

Ou alors vous voulez une largeur constante, devrait ajouter ces propriétés:

width: 200px ;  # any constant height
object-fit: cover;

object-fit: cover, corrige le problème d'étirement de l'image dans mon cas.

0
vikas0713