レスポンシブ・イメージ - ブートストラップ

Question

私はブートストラップ・フレームワークを使用していますが、以下のjsfiddleリンクに示されているように3つのイメージがあります。 。画像は、（可能であれば）同じライン上に残り、その間に間隔を置かないことが重要です。

<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

画像タグにクラスを追加し、ブートストラップを追加することを忘れないでください！

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

とあなたのimgタグに

class="img-responsive" 

クラスを追加します。 はちょうどあなたがブートストラップをリンクし、あなたがこの無料のCDNを使用することができます。

JSFiddle

EDIT：あなたが同じライン上の画像をしたい場合は、ちょうどカップルの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％の幅を有する赤色になり、親DIVを作成し、自動的に高さをリサイズ。 はその後、そうのようなスタイル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を設定する必要があります（もちろん、ブラウザのインス​​ペクタでそのパディングがどこから来るのか分かります）。