在引導中並排設置圖像並響應

Question

我已經寫了一個代碼，其中4個圖像並排保存在div內。

下面是代碼：

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

這看起來像這樣的全尺寸窗口：

enter image description here

現在窗口大小最小化時，圖像看起來是這樣的：

enter image description here

我希望圖像看起來像全尺寸的樣子，即使最小化後圖像不被拉伸。

我能夠得到上述圖像的視圖沒有它拉伸時，我刪除了樣式：寬度：100％;高度：70％;但隨後在全尺寸窗口中，圖像彼此之間留有空白。

請幫我把這個排序。

Answer 1

也許加入img-responsive class to image will fix the problem。

Answer 2

使用

class="img-responsive"

會讓你的圖片在不同設備響應。具體而言，並按照Bootstrap's documentation，這將增加

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

你的圖像元素。

您需要將失去你的內聯樣式

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

，因爲他們高於一切（普羅蒂普：不使用它們）。

最後，如果您不需要圖像之間的空格，您需要強制刪除每列的填充。例如：

div.col-xs-3 { 
    padding: 0; 
} 

Here是一個示例codepen。

Answer 3

@FredRocha嘿弗雷德，我試着只用IMG-reponsive &失去了內嵌樣式，但隨後的圖像進行全屏窗口大小看起來像這樣：

enter image description here