HTMLブートストラップを使用して行内の列にイメージを配置する

Question

行構造を持つコンテナを使用してヘッダを作成しています。一番左の列にイメージがあるようにしたいと思います。しかし、画像を追加するたびに、フルサイズで追加されます。私はそれをその列の設定されたサイズに制限したいと思います。

これが私の現在のHTMLコードです：私は私のCSSファイルに追加しようとしたが、それは何も変更していない

.logo { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="jumbotron" > 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-1"> 
 
     <div class="image-container"> 
 
      <center> 
 
      <img src="https://i.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt="test" class="logo"> 
 
      </center> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-10"> 
 
     <h2><center>TEST HEADER</center></h2>  
 
     <h4><center>TEST SUBTEXT</center></h4> 
 
     </div> 
 

 
     <div class="col-xs-1"> 
 
     <center>wowow</center> 
 
    </div> 
 

 
    </div> 
 
    </div> 
 
</div>

。

画像がコンテナの設定サイズに従うようにするにはどうすればよいですか？ CSSの下に追加

Answer 1

試行：

.image-container .logo{ width:100%; }

Answer 2

画像がCOL-XS-1カラムのフルサイズを取っています。すべてのクラスが持つ左右のパディングを取っているだけです。

イメージを少し大きくしたい場合は、その高さ（またはいずれか1つ）をpxで定義します。以下のような

：あなたはそれを置いている列を変更

.image-container .logo { 
width: 100px; 
}