2017-02-14 6 views
0

これは私が頭を悩ましている非常に単純な問題のように感じます。私はある方法を表示したい3つの画像があります。基本的には、ある画像をcol-md/sm/xs-7と2枚の画像に合わせて重ね合わせると、col-md/sm/xs-3に自動フィッティングされます。すべてはどちらの側でもcol-md/sm/xs-1の間にラップされています。イメージ幅をブートストラップ列の幅に設定する方法

イメージの列のサイズを変更するには、どのCSSを使用する必要があるのか​​分かりません。何か案は?

+0

幅:100%;高さ:自動;親に適用された子またはパディングに余白がないと仮定して、子(画像)の親(列)の100%が塗り潰されます。イメージをスタックしたい場合は、display:blockを持っていることを確認してください。それぞれの画像に設定されます。 – Korgrue

+0

コードや最小限の例を投稿できますか? – ZimSystem

+1

イメージのサイズは正しいですか?私は、50pxで100pxにするべき比率が1:2で、50pxで50pxになる画像は1:1であることを意味しますか?もしそうでなければ、どうやってそれらをフィットさせたいのですか?サイズを変更して画像を歪ませるか、クリップしますか? –

答えて

1

これは何か?

<div class="row"> 
    <div class="col-md-7"> 
     <image class="img-responsive" src="largeimage.jpg" width="200" height="400"/> 
    </div> 
    <div class="col-md-5"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/> 
      </div> 
     </div> 
    </div> 
</div> 

私は非常にあなたが絵を手配しようとしている正確などのような方法を理解していませんが、私は、これはあなたを助けるべきだと思います。あなたが絵をどのように配置するかの絵を私にペイントすれば、私はあなたに私の答えを合わせるでしょう。

編集:はい、私は今理解するかもしれないと思いますが、これが私の解決です。あなたはどちらかのイメージのサイズを変更する必要があります。または、うまくいけば、彼らはすでにあなたがそれを望むサイズであり、うまく収まるでしょう。これを試してみてください。

+0

基本的に全領域が100pxで100pxの場合1枚の画像を50pxで100px、3枚目を50pxで50pxずつ重ねて表示したい – RhinoTekMN

+0

RhinoTekMN - ビューポートが四角形でなければならない。彼らが正方形でないなら、@ KodosJohnsonが質問にコメントしたように、彼らは歪められたり、クリップされたりします。 – ZimSystem

+0

これは、イメージのサイズがcolのサイズに関係なく7になるようにするための例です。colのサイズ7の幅が300pxの場合は、イメージを300pxに収めてください。この方法では、ビューポートのサイズにかかわらず、画像は常に7/12のビューポート幅になります。他の2つの画像は常に3/12のビューポートサイズになり、両側に1/12のバッファがあります。 – RhinoTekMN

関連する問題