ブートストラップで画像を反応させたい

Question

あなたはinbuilt CSSを使ってブートストラップで画像を反応させることができます。親切に私を助けてください。今私はこのカスタムCSSを使用しています

page-header .logo img { 
    position: absolute; 
    top: 240%; 
    left: 126%; 
    width: 200px; 
    height: 150px; 
    padding:1px; 
    border:1px solid #021a40; 
    background-color:#000; 
    margin-top: -250px; /* Half the height */ 
    margin-left: -250px; /* Half the width */ 
} 

Answer 1

クラスを使用するimg-responsive。詳細な情報については はbootstrap 例えばに行く：あなたはブートストラップを使用している場合 <img src="..." class="img-responsive" alt="responsive image">

Answer 2

、それはimg-responsiveと呼ばれる応答性の画像を処理するために使用されるクラスが付属しています。単にあなたの<img>に追加し、それが期待通りに動作するはずです：

<img src="..." class="img-responsive" alt="Now I am responsive"> 

どのように応答に応じて、どのようにあなたの<img>が配置されている（例えば、絶対、相対、固定など）やサイズには影響を与えることができることに留意すべきであることされます。それはように動作するはずです

<page-header> 
    <div class='logo'> 
     <img src='http://www.trythisforexample.com/images/example_logo.png' class='img-responsive' /> 
    </div> 
</page-header> 

：

page-header .logo img { 
    position: absolute; 
    padding:1px; 
    border:1px solid #021a40; 
    background-color:#000; 
} 

と次のマークアップを使用します。あなたの現在のクラスに一人でそれを追加することで、それは本当に、次のように、あなたのクラスを変更するただし場合、顕著ではありません seen in this exampleとして期待される：