web-dev-qa-db-ja.com

コンテナの幅全体に収まるように画像を拡大bootstrap

bootstrapを使用して、幅が1300pxの画像があります。この画像を、1300pxに設定されたコンテナの幅いっぱいに埋めたいです。行を作成し、12列すべてを指定してから、画像にレスポンシブクラスを追加します。この設定で、以下の出力が得られます。

enter image description here

私の画像がコンテンツのどこにあるかに沿って画像を引き伸ばしたいです。これが私のコードです。

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

画像は幅100％に設定されているので、なぜそれがコンテナを満たさないのかわかりません。

htmlcssimagetwitter-bootstrap
18
pocockn

これで問題が解決するかどうかを確認します。

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

Cssクラスno-paddingは、デフォルトのbootstrapコンテナパディングをオーバーライドします。

完全な例 こちら 。

24
sQer

bootstrap 4.1では、引き伸ばされるページよりも小さい画像にはimg-fluidとともにw-100クラスが必要です。

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

解決済みの問題を参照してください： https://github.com/twbs/bootstrap/issues/208

（2018-04-20現在、ドキュメントは間違っています： https://getbootstrap.com/docs/4.1/content/images/ は、img-fluidがmax-width：100％を適用すると述べています。 height：auto; "しかし、img-fluidは問題を解決せず、imgタグのbootstrapクラスの有無にかかわらずこれらのスタイル属性を手動で追加しません。）

30
poikilos

containerクラスには15pxの左右の余白があるので、rowクラスには-15pxの左右余白があるため、この余白を削除する場合は次を使用します。

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

コードペン： http://codepen.io/m-dehghani/pen/jqeKgv

2
Mehdi Dehghani

まず、画像のサイズがコンテナより小さい場合、「img-fluid」クラスのみが問題を解決しません。画像の幅を100％に設定する必要があります。そのためには、Bootstrapクラス "w-100"を使用できます。 「container-fluid」および「col-12」クラスは、左と右のパディングを15pxに設定し、「row」クラスは左と右のマージンをデフォルトで「-15px」に設定することに注意してください。必ず0に設定してください。

注： "px-0"は、左右のパディングを0に設定するbootstrapクラスです。
"mx-0"は、左右のマージンを0に設定するbootstrapクラスです

追伸Bootstrap 4.0バージョンを使用しています。

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>
1
user11023470