Bilder nebeneinander setzen und in Bootstrap ansprechen

Question

Ich habe einen Code geschrieben, in dem 4 Bilder in div Seite an Seite in Spalten gehalten werden.

Unten ist der Code:

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" /> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
     </div> 
</div> 

Das ist wie das Fenster in voller Größe aussieht:

enter image description here

Nun, wenn die Fenstergröße minimiert wird, werden die Bilder wie folgt aussieht:

enter image description here

Ich möchte, dass das Bild so aussieht, wie es aussieht, auch wenn es minimiert wird, ohne dass das Bild gestreckt wird.

Ich konnte die Ansicht der obigen Bilder bekommen, ohne dass es gestreckt wurde, wenn ich den Stil entfernte: Breite: 100%; Höhe: 70%; aber dann hatten die Bilder in einem großen Fenster Leerzeichen zwischen einander.

Bitte helfen Sie mir, das sortiert zu bekommen.

Answer 1

Vielleicht hinzufügen img-responsive Klasse zu Bild wird das Problem beheben.

Answer 2

Mit

class="img-responsive"

Ihre Bilder als Reaktion auf verschiedenen Geräten machen. Im Einzelnen und wie pro Bootstrap's documentation, wird es

max-width: 100%; 
height: auto; 
display: block; 

zu Ihrem Bildelemente hinzuzufügen.

Sie müssen Ihre Inline-Styles

style="width:100%; height:70%;" 

verlieren, da sie alles andere außer Kraft setzen (Protip: nie verwenden).

Schließlich, wenn Sie die Leerzeichen zwischen den Bildern nicht möchten, müssen Sie das Padding für jede Spalte erzwingen. Beispiel:

Here ist ein Beispiel Codepen.

Answer 3

@FredRocha hey Fred, habe ich versucht, nur img-reponsive & verlieren die Inline-Stile verwenden, aber dann wurden die Bilder wie diese in Vollbild-Fenster Größe suchen:

enter image description here