Responsive Images - Bootstrap

Question

我正在使用bootstrap框架，我正在尋找3個圖像，如下面的jsfiddle鏈接所示當窗口大小變化/監視器大小太小而無法顯示完整大小的圖像時， 。重要的是圖像保持在同一行（如果可能），兩者之間沒有間距。

<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png"> 

感謝

https://jsfiddle.net/mztyoy7q/

Answer 1

一類添加到圖像標記，不要忘記添加引導！ 只要確保你鏈接的引導，你可以使用這個免費的CDN：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 

，並添加類

class="img-responsive" 

到您的img標籤。

JSFiddle

編輯：如果你想在同一行中的圖像，只需創建一對夫婦的div。 第一個，創建一個父DIV，

<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
</div> 

這div元件將是紅色的，用100％的寬度，並自動調整高度。 然後與風格float:left;每個圖像之間添加的div像這樣：

<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;"> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    </div> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
    <div style="float:left;"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
</div> 

這裏是更新JSFiddle如果一切正常，請讓我知道！

Answer 2

將圖像包裝到某些網格/列（例如.col-*），並使這些圖像填​​充100％的可用空間（.img-responsive）。這是一個乾淨，優雅的方式來做到這一點，只使用引導：

<div class="row"> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/660x160.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x160.png"> 
    </div> 
</div> 

https://jsfiddle.net/tvv89L1j/1/

關於去掉空格，最簡單的方法是隻需添加你自己的風格，以覆蓋填充的是引導補充道。您需要爲列設置padding-left和padding-right到0（當然，您可以在瀏覽器檢查器中看到填充來自哪裏）。