bootstrapのimg-responsiveクラスでレスポンシブ画像の縦の長さを自由にしてあげたい

Question

###前提・実現したいこと
Ruby on RailsでWEBサービスのランディングページを作成中です。
ランディングページに背景画像をレスポンシブに配置したいのですが、画像の縦の長さが切れてしまい困っています。
背景画像の縦幅、横幅ともにレスポンシブにするにはどうすればいいでしょうか。

イメージは下記のWantedlyさんのサイトの一番上の画像のような動きの表示にしたいと思っています。

https://www.wantedly.com/sync

###発生している問題

上記のスクショのように、画像の横幅は画面サイズにあわせたレスポンシブになっているのですが、画像の縦幅が固定になってしまっています。
（スクショ上ですと画像の縦幅が変化しているように見えますが、実際には画像の縦幅が固定となり、縦幅固定の枠の中で画像の横幅のみ変化しています）

###該当のソースコード
HTMLファイルの該当部分

<div class="img-responsive top-image jumbotron">
  <h1>this is test</h1>
</div>

CSSファイルの該当部分

.top-image {
  background: url("top_image.png");
  // max-width: 100%;
  // height: auto;
  background-size: cover;
}

###試したこと
CSSファイル内でheight: auto;など試してみましたが、変化がありませんでした。
（いまはコメントアウトしています）
また、height: 1000px;などのように高さをpx指定もしてみましたが、レスポンシブにならずうまくいきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
Ruby on RailsでWEBサービスを作成中で、
http://getbootstrap.com
上記のbootstrapを導入しています。

###追記
修正後のスクショ

Answer 1

.img-responsiveはimg要素をフルードイメージ対応にするためのclassですので、
div要素につけても意味を成しません。

また、.jumbotron にはデフォルトで固定のpaddingがついているだけですので、
そのままでは画面幅に応じて一定の比率を保ったまま高さも大きくすることはできません。
（コンテンツ内容のサイズ分の高さしか取ることはできないので高さは変化しません）

参考サイトのような状態にしたければ、.jumbotronがつけられている要素の高さが
幅に応じて一定比率で自動的にサイズ調整するようなスタイルを独自に設定する必要があります。

###ファーストビューいっぱいに広げたい場合
.jumbotronのサイズを常にファーストビューいっぱいに広げたいのであれば、

.jumbotron {
  position: relative;
  height: 100vh;
  background: url(背景画像) center center;
  background-size: cover;
}

のようにして、常にviewportの高さと一致するようにしておくか、
もしくは別途JavaScriptで動的に高さを調整するなどするとよろしいかと思います。
（vh単位はAndroid4.3以下非対応です）

###一定の比率を保ったまま領域を拡縮したい場合
.jumbotronのサイズを例えば常に4:3の比率に保った状態で拡大縮小されるようにしたい場合は、
擬似要素のpaddingを利用すると良いかと思います。

.jumbotron {
  position: relative;
  background: url(背景画像) center center;
  background-size: cover;
}
.jumbotron::before {
  content:"";
  display: block;
  padding-top: 75%; /*.jumbotronのwidthに対して高さ75%に保つ*/
}

padding-topの%値を変更すれば好きな比率に変更可能です。
また、ブレイクポイントごとに比率を変更したければ@mediaで分岐すればよいかと。

---

なお上記いずれの場合も.jumbotronの上に何かコンテンツを配置したい場合には、
position:absolute;による絶対配置で確保された領域の上にコンテンツを被せる必要がありますので
ご注意ください。

Comments

[solt0723]

色々ためしているとお返事おそくなってしまいました。
ありがとうございます。

.jumbotron {
position: relative;
height: 100vh;
background: url(背景画像) center center;
background-size: cover;
}

いただいた↑のcssをすこしカスタマイズして無事に画像を表示することができました！

Answer 2

私がやるとしたら
h1の下あたりにimgタグでその画像を置きます。

その上で

.top-image {
  position:relative;
}
img{
  position:absolute;
  width:100%;
  height:auto;
}
```とすると上手くいくのでは、と思います。

Comments

[solt0723]

回答ありがとうございます！

さっそく修正してみたのですが、まだうまく行かないようでした。。
h1のしたというのは、コードの記載場所の理解であっていますでしょうか。
（修正後のスクショを、始めの質問に追記として載せています）

はじめの質問後、回答いただく前に画像にパララックス処理を追加しようとh1タグにstyleなど追加指定ますが、divタグの構成はそのままになっていると思います。

いろいろ見ていると、はじめの質問に記載していたdivタグ下の部分の影響もあるのかと思い、後出しで申し訳ありませんが、追加で以前のコード記載させてください。

変更前HTMLファイル

```
<div class="img-responsive top-image jumbotron">
<h1 style="color: white; font-family: 'Helvetica Neue'; font-weight: 100; letter-spacing: 0.5px; font-size: 600%;">
Sample
</h1>
<h2 style="color: white; font-family: 'Helvetica Neue'; font-weight: 100; letter-spacing: 0.5px; font-size: 250%;">
text 1<br>text 2
</h2>
</div>
<div class="container">
<h1>Welcome to the Sample App</h1>

<h2>
This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</h2>

<%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
</div>
```

変更前CSSファイル

```
.top-image {
background: url("top_image.png");
// max-width: 100%;
// height: auto;
background-size: cover;
background-attachment: fixed;
}
```

上記のファイルを、回答いただいた内容にあわせて下記に修正しました。

HTMLファイル

```
<div class="img-responsive top-image jumbotron">
<h1 style="color: white; font-family: 'Helvetica Neue'; font-weight: 100; letter-spacing: 0.5px; font-size: 600%;">
Sample
</h1>
<h2 style="color: white; font-family: 'Helvetica Neue'; font-weight: 100; letter-spacing: 0.5px; font-size: 250%;">
text 1<br>text 2
</h2>
<img src="assets/top_image.png">
</div>
<div class="container">
<h1>Welcome to the Sample App</h1>

<h2>
This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</h2>

<%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
</div>
```

CSSファイル

```
.top-image {
position:relative;
// 以下、修正前のもの
// background: url("top_image.png");
// // max-width: 100%;
// // height: auto;
// background-size: cover;
// background-attachment: fixed;
}

img {
position:absolute;
width:100%;
height:auto;
}
```

現在このような見栄えになっています。

imgタグの場所をいろいろ動かしたりしたのですが、うまくいかずでお力もらえると、、！

[nobuzoh]

imgに
top:0;
left:0;
などを入れて位置を整えれば良いかと思います。

が、imgの幅がtop-imageに対して小さいですね。
top-image（またはimg-responsive、jumbotron）にpaddingが入ってませんか？

[nobuzoh]

あと、
imgのpositionはrelativeでh1をabsoluteにしてimgの上に乗っけた方が良いでしょうね。
その上でtop-imageのheightをautoにしとけば間違いない気がします。
検証できる状況にいないので、
見た目だけで回答して申し訳ないです・・・。

[solt0723]

その後いろいろ修正を繰り返してみました。
ていねいに見てくださってありがとうございました。

heightをautoにしてもなかなかうまく行かず、結局100vh;を指定することで解決できました。

情報少ないなか大変助かりました。

また、top-imageにたしかにpaddingが設定されていたので、padding-top: 0pxを指定すると見栄えいい感じになりました。