web-dev-qa-db-ja.com

Bootstrap 4のコンテナ内の全幅画像

Bootstrap 4を使用しています。

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

これはほとんどすべての場合に機能します。ただし、コンテンツ内の画像を全幅で表示したい場合がありますが、.containerとleft-paddingを使用するright-paddingにより、これは不可能です。

テンプレートレイアウトファイルではなく、適切な場所の各ビューに.containerクラスを追加することでこれを解決できましたが、これは非常に面倒になります。特に、異なる著者が記事を書くことができるCMSがあり、記事の途中で全角の画像が必要な場合、生のhtmlを次のように記述する必要があります。

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

どうすればこの問題を解決できますか？

htmlcsstwitter-bootstrapwidthpadding
9
Jamgreen

負のマージンを持つvw単位を使用できます。そして、それはレスポンシブフレンドリーです。

.full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;  
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

私のフィドルを参照してください： https://jsfiddle.net/ondrejruzicka/07y0o746/

14
ondrejruzicka

bootstrap 4では、img-fluidクラス：

<img class="img-fluid w-100" src="path.jpg" />

ここに w-100クラスは、コンテナに収まるようにより小さい画像を保証するために適用されます。

bootstrapを使用している場合：img-responsive の代わりに img-fluid。

5
Bhojendra Rauniyar

私はこれがあなたを助けることができると感じています。私がやったのは、<div>自体の背景として画像を作成し、中に内容がないので画像が見えるように指定した高さを設定することでした。

[〜＃〜] css [〜＃〜]

.full-width-image {
  height: 300px; // your specified height
  background: url("your-image.jpg") no-repeat center center fixed;
  background-size: cover;
}

さらに、他のコンテンツに合わせて左右のパディングを追加するには、クラス.containerを追加します。

[〜＃〜] html [〜＃〜]

<div class="container full-width-image"></div>

以下にサンプルを示します デモ .

2
Chain Trap

重要なのは、負のマージンを使用することです。ただし、Bootstrap=を使用すると、複数のブレークポイントと異なるデバイスがあるため、毎回正確なマージンを取得するのが難しくなります。

これは、追加できるJavascriptです。実際には、クラス「image-centered」とイメージの初期幅（HTML属性として設定する必要があります）を必要な幅と比較する）を使用して、すべてのイメージをFigureにラップします。画面の制約。初期画像の幅が画面の制約よりも大きい場合、記事内の画像は全画面になります。それ以外の場合は、中央に配置されます。

$(document).ready(function(){
    $("img").wrap("<figure class='image-centered'></figure>");
    $("figure.image-centered").each(function(){
        if ($(this).children("img").attr("width") > $(this).children("img").width()){
            var containerMargins = $(".container").css("marginRight").replace(/[^-\d\.]/g, '');
            var containerPadding = $(".container").css("paddingRight").replace(/[^-\d\.]/g, '');
            var calc = $(".container").width() + (Number(containerMargins) + Number(containerPadding))*2;
            $(this).css({"maxWidth": `${calc}px`, "margin": `1em -${Number(containerMargins) + Number(containerPadding)}px`});
        }
    });
});

CSS

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    margin: 0 auto;
    display: block;
}

figure {
    margin: 1em 0; 
}
figure.image-centered {
    margin-left: auto;
    margin-right: auto;
}
0
Ilya Kushlianski

使用 container-fluidクラスをcontainerの代わりに使用して、背景画像をレスポンシブフル幅にします。

サンプルhtml：

    <div class="container-fluid">   
        <div class="row image1">
        </div>
    </div>

CSSの例：

.image1{
background-image:url("path_to_image.jpg");
background-size: cover;
background-position: center center; 
background-repeat: no-repeat;
height: 400px;
min-width: 100%;}
0
Martin Loeffler

div.containerのpaddingがわかっている場合は、画像クラスに同じ量の負のmarginを設定できます。

HTML：

<div class="container">
    <img class="full-width-image" src="whatever.jpg" />
</div>

CSS：

.container {
    padding: 10px;
}

.full-width-image {
    margin: -10px;
}

あるいは、おそらくより正確には、div.containerからpaddingを完全に削除し、それを必要とする要素にのみ追加できます。

0
eoin