分割の幅全体を占めることなく、ブートストラップを使って画像を反応させるにはどうすればいいですか？

Question

Twitterのブートストラップを使っている人なら、html imgタグのimg-responsiveクラスを使って画像を反応させることができます。しかし、これらの画像は、分割の幅の100％を占める。

元の幅を維持したまま画像を反応させるにはどうすればよいですか？

Answer 1

イメージをラッパーに入れ、イメージに必要な幅をラッパーに与えることができます。 HTML

<div class="imgwrapper"> 
    <img src="img.jpg" class="img-responsive"> 
</div> 

CSS

.imgwrapper { 
    width: 80%; 
} 

上記理論的には親要素の幅、及び画像上img-responsive級のimgwrapper 80％がいっぱいになります行う必要がありますラッパー全体をアップ。

これで問題が解決しない場合は、keep original width, but make it responsiveの意味を少し詳しく説明できますか？それを反応させると、イメージのサイズが変更されるため、元の幅を持たなくなります。

Answer 2

クラスは画像にmax-width: 100%;とheight: auto;を適用するので、元の幅を明示的に保持したい場合は、imgタグのwidth属性を使用して画像の幅を設定する必要があります。

Answer 3

画像の周囲には、画像の配置に使用できる親の実際のサイズを定義するラッパーが必要です。それは親divに関連します。次に、イメージに応じて.imgを適用します。これにより、イメージはラッパーと同じ幅になります。

HTML

<div class="wrapper"> 
    <img src="your-image.jpg" class="img-responsive" /> 
</div> 

CSS

.wrapper { 
    width: 50%; 
} 

あなたが元のサイズを維持したい場合は、あなたも追加する必要があります（小さなサイズが、決して高を持つようにリサイズされます） max-width画像の元のサイズに対応する必要があります。これにより、100％の元の値が上書きされます

.wrapper img { 
    max-width: 280px; 
}