2017-02-15 5 views
0

私はブートストラップが初めてであるため、どのように動作するのか正確にはわかりません!
私がしたいのは、同じサイズのスクリーンショットに表示された3つの画像を作ることです。
解像度が異なります。
これは、この画面があなたのIMGにclass="img-responsive"を追加し、同じサイズの表示のためにあなたが追加することができますレスポンシブルディビジョン内のイメージを合わせる

enter image description here

答えて

0

を撮影し、各画像

<div class="col-sm-2 "> 
 

 
\t \t \t \t <div> <img src="img/test.jpg"> </div> 
 

 
\t \t \t \t <div > <h3>Text Here</h3> </div> 
 
\t \t \t \t 
 
\t \t \t </div>

ためのhtmlですmy_imgのようないくつかのカストムクラスとそこにサイズを設定:

my_img{ 
height: 200px 
width: 150px 
} 

、または親の既定の高さを設定します。幅:100%を超えることができます。高さ:100%

あなたが知っているのは列です。それは幅を設定します。まだクラスがないdivを持っているよりも。そのdivまたはimgにスタイルを直接追加することができます。

+0

ディメンションを自分で指定すると、divは応答しますか?ブラウザをモバイル画面サイズにリサイズすると、画像は縦に積み重ねられ、その高さは異なるように「見える」ことはありませんが、デスクトップで開くと目立つようになります!そして幅は同じです!高さだけが一致しません!事前にTy! –

0

この列はデフォルトで反応しますので、imgwidth: 100%;(親要素に比例します)を与え、そのdivは親要素にも同様にcol-sm-2となります。

+0

イメージの幅を100%に設定しましたが、幅は問題ありませんが、これらのイメージの高さは一致していません!私は高さ= 100%を試しましたが、それは変わりません!ありがとう! –

+0

私が正しく理解していれば(あなたはあなたにコードをスタックスニペットで追加するべきです)、 'width:100%;'を追加するのではなく 'height:100%;'に 'overflow-x: (画像が同じサイズでない場合)すべての画像が同じ高さになり、一方が他方より大きい幅を持つ場合、親要素はx軸のオーバーフローを隠すでしょう。 – Dotol