質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

498閲覧

Jumbotron レスポンシブの際画像が切れてしまう

hellohello

総合スコア22

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/19 05:11

【実現したいこと】 レスポンシブに拡大縮小する画像の上に、テキストを載せたい。

【試したこと】Jumbotronを使い、無事に背景画像の上に文字を置くことはうまくいきました縮小時
しかし次は画像の縦が切れてしまいました。拡大時
そこで発生している問題と同じ質問を参考に試しましたが、
height:100vh;の影響で、画像が一面に広がり背景画像がとんでもなく大きくなってしまいました。
100vh時
Jumbotronを使い、ただ、普通に元の画像を画面幅に合わせて拡大縮小したいのですが、どうすれば良いでしょうか?
皆様だったらこうする、という方法もありましたら教えてください。
宜しくお願い致します。

HTML

1<!doctype html> 2<html lang="en"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" media screen and(900px)> 7 <link rel="stylesheet" href="css"> 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 10 11 <title>test</title> 12 13<body> 14<div class="jumbotron" style="background: url(###); background-size: cover; "> 15 <div class="container text-left"> 16 <h1>ああああああああああ</h1> 17 <p>ああああああああああああああああああああああああああああああああああああああああああああああああ</p> 18 </div></div> 19</body> 20</html>

CSS

1.jumbotron { 2 color:white; 3 position:relative; 4 height:100vh; 5}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/11/20 08:56

参考先の回答にあるように、画像の大きさからアスペクト比を求め、「.jumbotron」のbox自体をレスポンシブさせれば良いのでは?
yoshinavi

2018/11/20 15:03

画像のサイズをはいくつでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問