wake-up-neo.com

Bootstrap 3-responsive Bilder nebeneinander auf gleicher Höhe

Ist es möglich, mit Bootstrap 3 2 responsive Bilder nebeneinander mit gleicher Höhe zu verwenden? Im Moment hat der col-sm-4 nicht die gleiche Höhe.

<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-Geige:http://jsfiddle.net/u9av6/3/

Vielen Dank!

22
l00per

versuche dies:

<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

hier ist meine Lösung mit einem einfachen Wrapper. .__ Die Idee ist, sich mit dem Seitenverhältnis

jsfiddledemo

6
foxdie

Hier ist eine funktionierende Version mit 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

Möglicherweise liegt Ihr Problem darin, dass in Ihrem Code die Polsterung nicht berücksichtigt wird.

Ihr 400px und 800px ist Nizza, aber mit dem Auffüllen ist dies nicht gut. 

In dieser Geige: http://jsfiddle.net/Lrc5t/1/ ohne Polsterung behalten sie die gleiche Höhe. Aber es ist nicht schön ohne Polsterung ...

Die Auffüllung in jedem .row ist links und rechts 15px.

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;    
}

UPDATE: 

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

Ohne Auffüllen ist dies nicht schön, sondern fügen Sie dem rechten Bild zusätzliche Auffüllung hinzu:

<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: Sie können stattdessen links oder rechts die Polsterung hinzufügen, um die Polsterung in der Mitte zu halten. Und ... nopadding-one und text-right class sind zu löschen ... (ich habe vergessen) ...

UPDATE NACH KOMMENTAR: * Warum 45px? *Bild 1 ist float: left, also hat es nur die rechte Abstandsfläche bei 15px Bild 2 hat links und rechts eine Auffüllung um 15px {= 30px} (um die gleichen Einschränkungen zu erhalten), müssen Sie die gesamte Auffüllung an Bild 2 übertragen.

1
Pimento Web

Überprüfen Sie diesen Code. Dieser Code sucht nach der kleinsten Höhe des Bildes und setzt es auf die maximale Höhe der anderen Bilder. Der Rest des Bildes wird ausgeblendet. Hör zu. 

<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>

Meine HTML ist 

                <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

Damit die Bilder nebeneinander angezeigt werden, müssen Sie drei Dinge tun:

1st : Damit alle Bilder in der HTML-Datei wie folgt reagieren: 

<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>

Dies ist, um zwei Bilder nebeneinander zu stellen. Sie könnten so viele Bilder wie möglich haben.

2nd: Geben Sie diesen Bildern in Ihrer CSS-Datei die Höhe wie folgt an:

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

Die Breite ist auf 100% festgelegt, was bedeutet, dass beide (für dieses Beispiel)/alle Bilder den 100% -igen Teil der Spaltenbreite abdecken, die in Ihrem HTML-Code angegeben ist.

3rd (Am wichtigsten): CSS hat diese Eigenschaft, um automatisch Ränder/Füllungen rechts und links zu hinterlassen, wenn Sie ein Bild in ein div einfügen und diese Auffüllung ist mit dem Bild oder einem anderen Element verknüpft, das Sie einfügen möchten ein div. 

Um dies in Angriff zu nehmen, gehen Sie zu Ihrer CSS-Datei und setzen Sie für jedes Bild die linke und rechte Auffüllung wie folgt auf 0px:

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

}


.left-image{

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


}

Dies ist ein Arbeitsbeispiel und eine Erklärung, wie Sie Bilder mithilfe von bootstrap nebeneinander einfügen können!

0
Shubham

wenn Sie eine konstante Höhe wünschen, sollten Sie diese Eigenschaften hinzufügen:

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

Oder Sie möchten die Breite konstant haben, sollten Sie diese Eigenschaften hinzufügen:

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

object-fit: cover, behoben in meinem Fall das Problem der Bilddehnung.

0
vikas0713