レスポンシブなイメージでdivを得るにはどうすればいいですか？

Question

サイズ変更で縮小するレイアウトを作成したいと思いますが、スタックレスではなく、divを横並びにしてイメージを縮小したいと考えています。

これは、私は本当に私の答えを見つけることができませんSO簡単です！

私はDrupalのでもブートストラップを使用して、その電気ショック療法のクラス* XS-をオーバライドする必要があるのです。

下の画像は、私はあなたがそれらを正しく使用できるようにライブラリが内部でどのように機能するかを理解することは素晴らしいことだ

<p> 
 
    <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" /> 
 
    <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" /> 
 
</p>

Answer 1

を意味するかを示しています。シンプルなCSSでは、幅を言及しながらパーセンテージを使用するというコンセプトがあります。

だから、ラッパーのdivが100％の幅と子の幅である必要があります子供の数で割ったラッパーの幅と同じでなければなりません。子供2名の場合、幅はそれぞれ50％になります。

応答性は、あなたがこれらの上にメディアクエリを追加するときにのみ付属しています。だから、あなたは特定の幅のようなCSSを追加し、子どもを100％にするでしょう。ブートストラップのグリッドパターンを理解し、問題に取り組むことをお勧めします。

Answer 2

このコードが働いた：

<div style="width:80%; margin: 0 auto;"> 
 

 
<div style="width:33.3333%; float:left;"><img class="img-responsive" src="OmegaT.png" style="margin: 0 auto;" /></div> 
 

 
<div style="width:33.3333%; float:left;"><img class="img-responsive" src="poedit.png" style="margin: 0 auto;" /></div> 
 

 
<div style="width:33.3333%; float:left;"><img class="img-responsive" src="trados.png" style="margin: 0 auto;" /></div> 
 
</div>

Answer 3

私はそれを考え出しました。

私はDrupal 7とboostrapを使用しています。

問題は、Drupalはデフォルトに設定ブートストラップテンプレートを持っていても、いないすべてがブートストラップであるということです。

いくつかのものは、問題のすべての種類を引き起こし、がオーバーライドされます。

ソリューションは、ブートストラップビュー、ブートストラップ表示スイート電気ショック療法のように、ブートストラップ・モジュールを使用して、すべてのコンテンツを持っていることです...

だから問題は本当にDrupalの問題でした。