Bootstrapのcontainer内の画像をcontainerをはみ出して、画面幅に対して中央寄せにする方法。

Question

Airbnbのサイトの模写コーディングを行っています。
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1592260766_NDQxOWVhN2Q3MmFi

Bootstrapで実装しているのですが、
https://gyazo.com/06b0ff51f5c34a8929911af9ae8241b6
この部分で、containerの中に画像があるのですが、
containerの領域をはみ出して、画像を表示させています。

親要素（container）を無視して、
wrapper2のボックスを画面全体の中央に寄せるにはどのようにすれば良いでしょうか。

以下が私の書いたコードとなります。
よろしくお願い致します。

【HTML】
`<div class="container px-0">
中略…

<div class="wrapper2"> <img src="dbe25d99-6821-4e02-802f-fcd7aaef85bc.jpg" alt="" id="picture3"> <h1 class="text-white" id="txt_on_picture3">収入を増やしたい？</h1> <a href="#" id="link_on_picture3">リスティングを作成</a> </div> </div>` 【CSS】 `.wrapper2{` ` margin: 0 calc(50% - 50vw);` `}`

#picture3{
max-width:1280px;
}

こちらが私の書いたコードの表示になります。
https://gyazo.com/31efdfc252e1d83e395146f8c47df943

Comments

[storm3]

上記失礼しました。お手本と模写はあくまで違いを画像にしたものだったんですね。
Airbnbがdivタグで実装しているのをBootstrapとimgタグで実装し直した場合に、うまくいかないということでしたか。

Answer 1

まず、背景画像はimgタグで表示させるより、CSSのbackground-imageで表示させた方が背景として扱いやすいでしょう。
模写先もbackground-imageを使ってます。

親要素をはみ出して背景を表示させたい場合は、ネガティブマージンを使うと簡単です。

下記が参考になるかと。

HTML - 背景画像だけ画面いっぱいにしたい。｜teratail

Comments

[chikasei427]

ご指摘ありがとうございます。
背景はbackground-imageで実装する方が扱いやすいのですね。
ネガティブマージン参考にさせて頂きます。
ご回答ありがとうございました。

Answer 2

こちらでいかがでしょうか?

<div class="container px-0" style="background: #ff0;">
  <div class="wrapper2">

    <!-- 追加 -->
    <div class="img-container">
      <img src="https://ferret.akamaized.net/images/5b5ea66efafbd822e9000008/original.jpg" alt="" id="picture3">
    </div>

    <h1 class="text-white" id="txt_on_picture3">収入を増やしたい？</h1>
    <a href="#" id="link_on_picture3">リスティングを作成</a>
  </div>
</div>

.wrapper2 {
  margin: 0 calc(50% - 50vw);
}
.img-container {
  position: relative;
  background: #f00;
  height: calc(100vw * 画像の高さpx / 画像の横幅px);
}
/*
#picture3{
  max-width:1280px;
}
*/
#picture3 {
  width: 100vw;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

Comments

[chikasei427]

解決致しました。
ありがとうございました。