web-dev-qa-db-ja.com

Twitter-bootstrapで画像のレスポンシブを停止する方法は？

レスポンシブレイアウトを作成するためにTwitter bootstrapを使用しています。すばらしいように機能します。

画像の反応が良くなりすぎます。幅と高さを固定するだけでよい画像が必要です。

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

どうすればそれを作ることができますか？

twitter-bootstrapresponsive-design
10
LoganPHP

ついに働いた。

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

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

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

例えば。

/* 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>
14
hajpoj

コードをチェックして、画像の幅と高さの属性を設定して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スタイリングを上書きする必要があります（行〜68バージョン2.0）。

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;
}
4
Milche Patern