Bootstrap4で、背景画像(縦長)をモバイルにあわせて綺麗に配置したいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Bootstrapで、背景画像(縦長)をモバイルにあわせて綺麗に配置したいですが、上手くいきません。

具体的には

スマホサイズはそのまま全画面に、ipadやPCであれば、画面を半分にして片方に画像を入れたいですが、可能でしょうか。
お手数ですが、宜しくお願いいたします。




### 補足情報（FW/ツールのバージョンなど）
Bootstrap4

行動規範の内容に同意します

回答1件

ベストアンサー

スマホサイズはそのまま全画面に、ipadやPCであれば、画面を半分にして片方に画像を入れたいですが、可能でしょうか。

とりあえず左右に分割する想定で作ってみました。

HTML
1<div class="aaa"></div>

CSS
1.aaa {
2  background-image: url(xxxx/xxxx.jpg);
3  background-position: center center;
4  background-size: cover;
5  background-repeat: no-repeat;
6
7  width: 100vw;
8  height: 100vh;
9}
10
11@media screen and (min-width: 480px) {
12  .aaa {
13    width: 50vh;
14  }
15}

ソースコードがあれば、回答の精度を上げられると思うので、解決しなかったらソースコードの提供をお願いします。

投稿2020/06/02 23:35

編集2020/06/04 22:51

new1ro

総合スコア4528

退会済みユーザー

2020/06/02 23:47

new1ro様ご回答頂きまして、ありがとうございます。説明が分かりづらくて申し訳ありません。画面は左右に分割したいと思っております。早速ソースコードを変更してみましたが、どのモバイルでも全画面に画像が拡大表示されております。大変恐縮ですが、ソースコードを添付いたしますので、何卒宜しくお願いいたします。 body { color: #2ED4DB;; background-image: url('/images/56D34C9E-6ADC-4379-BC7C-5C6F7235B1BD_1_105_c.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100vw; height: 100vh; } @media screen and (min-width: 480px) { body { width: 50vh; } }

new1ro

2020/06/03 00:05

bodyに50vhなどを指定するのではなく、 body内に1つ<div>を作って、そちらに、現在bodyに指定している記述を移動してみてはいかがでしょうか?

退会済みユーザー

2020/06/03 01:38

new1ro様ご丁寧にありがとうございます。 body内に<div>を１つ作成して、記述を移動いたしました。画像が少し見切れて(下部分)、スクロールするような形になりました。また、PCにすると画面幅の1/4くらいに左寄せで画像が表示される形です。色々と試しましたが、難しかったですのでPC版は諦めて横長画像を表示しようと思います。最後に画像が見切れる件について、お聞きしたいです。 height:100vhで要素の高さを100%にしているかと思いますが、イコール「一画面」ではないのですね。調べてmin-heightも試しましたが、レイアウトが崩れてしまいました。これに対して、良い対策がありましたら、教えていただけますでしょうか。

new1ro

2020/06/03 06:21 編集

> height:100vhで要素の高さを100%にしているかと思いますが、 height: 100vh;ではあ、要素の高さを「ブラウザの画面の高さに対して」100%にしようとしています。「ページ全体の高さに対して」100%、ではありません。(認識違いがあるかもしれないので念のため) -------------------------------------------- > 画像が少し見切れて(下部分)、スクロールするような形になりました > イコール「一画面」ではないのですね。こちらについて、画面の高さと一致させるために、下記[1]、[2]が欠けていることが原因かもしれません。 -------- [1] 上下paddingを指定しているのであれば、実際にブラウザで描画されるサイズは「画面の高さ(100vh) + 上下のpadding」になります。「box-sizing: border-box;」を指定すると、paddingを含めて100vhになるので試してみてもいいかもしれません。 -------- [2] bodyは、標準で外周に余白が指定されているので、「margin: 0;」「padding: 0;」などの指定が必要です。

退会済みユーザー

2020/06/04 15:57

new1ro様ご回答頂きまして、ありがとうございます。 [1]につきましては、該当クラスに指定した場合と全要素に指定した場合を試しましたが、上手くいきませんでした。画像を縦方向に中央寄せしたく、「img」に「position:absolute」や「transform:translateX」を指定したことは関係しているのでしょうか。 [2]につきましては、「body」の「margin」及び「padding」は指定済みでした。何度も申し訳ありません。

new1ro

2020/06/04 23:18 編集

> 画像を縦方向に中央寄せしたく、「img」に「position:absolute」や「transform:translateX」を指定したことは関係しているのでしょうか。両方とも、前提条件として必須の情報です！そしてやはりまだ情報が足りません。「画像を縦方向に中央寄せしたく」何に対して中央寄せしたいのかがわからないので、結論が大きく変わります (おそらく「画面の高さに対して」ではないかと推測します)。「position: absolute;」については以下の情報がセットで見れないと、結論が大きく変わります。・周辺のHTML構造や、positionを指定している要素やその前後のCSS指定・どの祖先要素にposition: relative;を指定しているのか・top、right、bottom、leftにはどの数値が指定しているのか「transform: translateX();」は中身にどういった数値を指定しているか、によって結論が全く異なるものになります。ただ、縦方向の中央揃えなら「translateX」ではなく「translateY」が適切ではないかと推測します。また先にあったコメント「PCにすると画面幅の1/4くらいに左寄せで画像が表示される形です。」については、translateXの悪影響で左側 (もしくは右側) に1/4ほどはみ出てしまっているのではないかと推測します。 ---------- ソースコードの提供が少ないのでやはり回答の精度が上げられず、解決につながらないテキストのやり取りだけが増えている印象があります。最初の投稿時にソースコードを貼り付けるようにしてみると、適切な回答を得やすくなると思うので、早く問題解決できると思います！

退会済みユーザー

2020/06/05 03:04

new1ro様連日お付き合い下さり、ありがとうございます。そしてお手数をお掛けして申し訳ありません。ソースコードを記載いたしますので、何卒宜しくお願いいたします。【html】 <body>  <nav class="navbar navbar-expand"> <div class="collapse navbar-collapse justify-content-start" id="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">xxxxxx</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">xxxxxx</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">xxxxxx</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">xxxxxx</a> </li> </ul> </div> </nav> </div>  <div class="main"> <h2>xxxxxx</h2> <img src="xxx/xxxxx" alt="xxxx"> </div> </body> </html>

退会済みユーザー

2020/06/05 03:05

【CSS】 body { margin: 0; padding: 0; } .main { width: 100vw; height: 100vh; background-color: #ffffff; position: relative; } .main img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); } .navbar { background-color: #ffffff; } a { color: #6A7171; } h2 { color: #6A7171; text-align: center; padding-top: 100px; }

退会済みユーザー

2020/06/05 03:15

現状、小さな画像を使用しておりますので、どのデバイスで見ても画像は収まっているのですが、スクロールバーが出ており、background-colorで指定している白い背景が画面に収まりきっていないようです。

行動規範の内容に同意します