【実現したいこと】 レスポンシブに拡大縮小する画像の上に、テキストを載せたい。
【試したこと】Jumbotronを使い、無事に背景画像の上に文字を置くことはうまくいきました)
しかし次は画像の縦が切れてしまいました。
そこで発生している問題と同じ質問を参考に試しましたが、
height: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}
あなたの回答
tips
プレビュー