Q&A
ありがとうございます！
2パターン試してみたのですが、どうやら画像幅がさらに小さくなるようです（質問の一番上に追記として画像を添付しました）
引き続き考えてみたいと思います、どうもありがとうございます。
幅を縮小すると画像が縦一杯に表示されない状態でして、下の添付画像の赤枠で囲った部分まで画像が表示されるようにしたいのですが、どのように記述すると改善できますでしょうか。
ソースコードが以下となります、こちら恐縮なのですが、宜しくお願いいたします。
<style type="text/css"> .jumbotron { background-image: url(mizu.png); background-repeat: no-repeat; background-attachment: fixed; text-align: center; } </style> <body> <div class="jumbotron" id="jumbotron"> <h1 class="display-3">My Awesome App!</h1> <p class="lead">This is why YOU should download this fantastic app!</p> <hr class="m-y-2"> <p>Want to know more? Join our mailing list!</p> <form class="row justify-content-center"> <div class="form-group-lg"> <label class="sr-only" for="email">Email address</label> <div class="input-group"> <input class="form-control" id="email" placeholder="Your email" style="width:350px;" type="email"> </div> </div><button class="btn btn-primary" type="submit" style="margin-left:5px;">Sign up</button> </form> </div> </body>
回答3件
0
解決していますが、こうでは。
CSS
1background-size: auto 100vh;
【CSS には vw, vh, vmin, vmax という単位がある ｜ DevelopersIO】
https://dev.classmethod.jp/ria/html5/css-length-viewport/
投稿2019/02/11 13:18
総合スコア69398
0
.jumbotronのスタイルに
css
1background-size: contain;
または
css
1background-size: cover;
を追加してみてはいかがでしょう。
投稿2019/02/11 11:49
総合スコア1899
0
自己解決
以下の記載をすることで綺麗に表示させることができました。
background-size: 500% auto;
cerfwebさん、ありがとうござました。
投稿2019/02/11 12:50
総合スコア15
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/11 14:11
2019/02/11 15:09