twitter-bootstrap - twitter-bootstrapで画像レスポンシブを停止するには?

Question

レスポンシブ レイアウトを作成するために Twitter ブートストラップを使用しています。

画像がレスポンシブになりすぎます。幅と高さを固定するだけでよい画像がいくつか必要です。

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

どうすれば作れますか？

Answer 1

新しいクラスを作成し、縮小したくない画像の幅と高さに等しい最小高さと最小幅を設定し、そのクラスをそれらの画像に追加します。

例えば。

/* css */
img.no-resize {
  min-height: 40px;
  min-width: 50px;
}

/* html */

<div class="span1">
  <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40">
</div>

Answer 2

コードをチェックして、画像の幅と高さlike you didの属性を設定しても機能せず、修正するスタイリングに干渉があることを確認してください。

<div class="span1">
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" />
</div>

幅と高さの属性を正しく入力した場合、画像は Bootstrap でサイズ変更されません。インライン属性は css よりも優先されます。

それ以外の場合は、bootstrap.css の img スタイルを上書きする必要があります (バージョン 2.0 の ~68 行目)。

img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

仕様で CSS セレクターを作成します。

/* css */
.max-resize-50x40 {
    max-height: 40px;
    max-width: 50px;
}
.resize-50x40 {
    height: 40px;
    width: 50px;
}

Answer 3

最後に働いた。

.fixed_width {
  height: 40px;
  width: 50px;
}

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>