web-dev-qa-db-ja.com

Twitter Bootstrap 3でデフォルトで画像が反応しない？

新しいバージョン3.0では、画像がすべてのブレークポイントで応答するように、画像が同じクラス名を持つdivの一部である場合、画像のクラス名をcol-lg-4 col-sm-4 col-4に設定する必要があります。

バージョン2では、画像のCSSプロパティはデフォルトで親のdivプロパティを継承しました。

これは正しいです？

javascripttwitter-bootstraptwitter-bootstrap-3responsive-design
56
Laurent-514

ブートストラップ4

Bootstrap 4の場合、Sass（SCSS）を使用します。

// make images responisve by default
img {
  @extend .img-fluid;    
}

バージョン3用に更新された回答

ブートストラップ3には、レスポンシブイメージ用の特別なクラスがあります（最大幅を100％に設定）。このクラスは次のように定義されます：

.img-responsive {
 display: block;
 height: auto;
 max-width: 100%;
}

注imgタグはデフォルトで取得されます：

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

したがって、class="img-responsive"を使用して、画像をレスポンシブにします。

すべての画像をデフォルトでレスポンシブにするには：

css：bootstrap cssの下に以下のコードを追加します。

   img {
          display: block;
          height: auto;
          max-width: 100%;
   }

less：以下のコードをmixins.lessに追加します：

img {
  &:extend(.img-responsive);
}

注：Less 1.4.0が必要です。参照： https://stackoverflow.com/a/15573240/1596547

カルーセル

carousel 内のimgタグはデフォルトで応答します

セマンティックルール

@ its-me （ https://stackoverflow.com/a/18653778/1596547 ）の回答も参照してください。上記を使用して、すべての画像をデフォルトでレスポンシブにすることで、画像を ブロックレベル要素 に変更します。ブロックレベルの要素は段落（<p>）では使用できません。以下を参照してください： https://stackoverflow.com/a/4291515/1596547

私が理解している限り、ブロックレベル要素とインライン要素の区別は、より複雑なコンテンツカテゴリのセットに置き換えられています。参照： https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level そのため、HTML5では、pタグに通常の文字データと混在する任意のフレージング要素を含めることができます。 （参照： http://www.w3.org/TR/html-markup/p.html ）imgタグはそのようなフレージング要素です。表示プロパティのimgタグのデフォルト値は、実際にはinline-blockです。表示プロパティをブロックに変更しても、前述のルールのいずれにも違反しません。

ブロックレベルの要素（display:block）は、親の使用可能なすべてのスペースを使用します。これは、レスポンシブイメージに期待されるとおりです。したがって、display: block;を設定するのは合理的な選択のように思えますが、inline-block宣言よりも優先する必要があります。

@ its-me （ https://stackoverflow.com/a/18653778/1596547 ）で示唆されているように、inline-blockを必要とするp要素内の画像は、まったく反応する。

142
Bass Jobsen

@BassJobsenによる素晴らしい提案ですが、display: inline-block;の代わりにdisplay: block;を使用します。 1 （つまり、他の場所を台無しにしないようにすることができます）。

したがって、私のものは次のようになります。

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

私の理解に欠陥がある場合はお知らせください。 ：）

[1]：ユースケースの場合、ほとんどの場合、画像はブロックレベルの要素にラップされます。そして再び、パラグラフ（p）のような要素で画像を使用します。ここで、inline-blockはblock要素よりも適切です。

13
its_me

すべての画像にimg-responsiveを適用しても安全かどうかを確認した後、ここに行きます。

@its_meの答えから、p要素の下の画像にこれを適用するのは安全ではないと考えるようになりました。

これはbootstrapチームが考えていることではないようです。

これが、bootstrap3でデフォルトで画像が応答しない理由です。

要約すると、疑いのないサードパーティのウィジェット（Googleマップを含む）の多くが壊れてしまいます。これが、Bootstrap v3でBootstrap v2の「イメージはデフォルトでレスポンシブ」アプローチをロールバックし、明示的な.imgレスポンシブクラスを採用した理由です。

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

0
tepez