イメージをコンテナに収まるようにする

Question

イメージのサイズが大きく、コンテナを越えてイメージの位置を設定するために、それぞれ4列のイメージを含む行を持つブートストラップグリッドシステムを使用しようとしています。それでもそれは機能しません。画像をコンテナのサイズのdivコンテナに合わせる方法はありますか？

HTML：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f1.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f2.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f3.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f4.jpg" alt="f1"> 
      </div> 
    </div> 
<div> 

CSS：

.sec5row { 
     border : 1px solid red; 
     position: relative; 
    } 
    .filter { 
     position: absolute; 
    } 

Answer 1

追加のCSSコードに

#img { 
    width: 100px;//change px size 
    height: 100px;//change px size 
    padding-left: 3px; 
    padding-top: 5px; 
} 

Answer 2

あなたが応答のdiv内の画像に合わせて、以下のコードを使用することができます

.filter { 
    width:100%;/*To occupy image full width of the container and also fit inside the container*/ 
    max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/ 
    height:auto; 
    } 

Answer 3

ブートストラップのクラス ".img-responsive"はあなたの問題を解決すると思います。したがって、このような何かを試してみてください。

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f1.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f2.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f3.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f4.jpg" alt="f1"> 
 
      </div> 
 
    </div> 
 
<div>

それはあなたへの画像のスタイル設定 "のmax-width：100％;" 「高さ：自動;」それはまさにあなたが必要とするものでなければなりません。追加のCSSは必要ありません。

Answer 4

ちょうどそれが罰金