divを使ったカバーページの実装

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML CSSにて（=画像=）の様なデザインを実装したいと思うのですが、意図したモノになりません。

画像がページの上下中央に配置しており、その親要素であるdivでページ全体を覆うフルページの様になる様にしたいです。

該当のソースコード

<div class="container">
  <img src="test.png" alt="">
</div>

html, body {margin: 0;}

div {
 display: inline-block;
 width: auto;
 height: 100vh;
 background-color: skyblue;
}

img {
　display: table-cell;
  vertical-align: middle;
}

試したこと

参考
divではコンテンツの幅・高さとなるので、inline-blockで幅・高さを指定する様にしたのですが、変わりませんでした。

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

HTML5

###　追記
これらの画像はレスポンシブにも対応する様なスタイルであり、なおかつ横長の画像を使用するので使用しなければなりません。レスポンシブ対応にしたいので単位をvh で実装してみました。

Comments

[m.ts10806]

CSSもご提示ください。
またdivは1つしか使ってはいけない”課題”なのでしょうか。

[退会済みユーザー]

CSSは本質問を修正し追加しておきます。

本件は課題ではありませんので、1つでなくてもましてやdivを使わなくても大丈夫です。ただ、この実装を行うにあたり、自分で簡単により直感的なスタイリングがしやすいようdivを1つにして表現してみました。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[退会済みユーザー]

スマホからBA選択を行ったのですが、できていませんでしたね。
失礼しました

Answer 1

IE11ではうまくいかない可能性がありますが、

.container {
  height: 100vh;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

こんな感じでいけるのでは、と思います。
ただ、個人的には、display: flex;の子要素が<img>になるのが気持ち悪いので、
HTMLのほうも、

<div class="container">
  <figure><img src="test.png" alt=""></figure>
</div>

て感じで、ひとつ要素を追加すると良いかな、と思います。

<figure>である必要はないです。

この回答の他にも様々な解決策が考えられます。
CSS 上下　中央揃え　フルスクリーン
あたりで検索すると、いろいろ出てくると思います。

2020/03/16　追記
画像をレスポンシブにしたいとの事だったので、下記を追記

img {
  max-width: 100%;
  height: auto;
}

codepen 参考

Comments

[退会済みユーザー]

ご回答ありがとうございます。
当方で確認したのですが、要件通りの実装にはなりませんでした。

[marlboro_tata]

すみません、要件が読みきれなかったようです。
https://codepen.io/ccc-labo/pen/BaNxBxB
上記のような感じのことなのかな、と思っていました。勘違いだったのですね・・・。

[退会済みユーザー]

提示してもらったURLの様なのですが、横長の画像であるのとレスポンスに対応したいのです。。

要件定義が上手くできておらず、申し訳ありません。質問を修正しておきます。

[marlboro_tata]

画像のレスポンシブについては、回答に追記をしました。

[marlboro_tata]

あ、上記で対応したのは、水平方向のレスポンシブです。
縦方向へのレスポンシブが必要な場合は、object-fit プロパティを使うしかないです。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

object-fit プロパティは、IE11が未対応なので、別途JSライブラリなどを利用する必要があります。
https://github.com/fregante/object-fit-images

[退会済みユーザー]

追記ありがとうございます。当方で検証したところ意図した形で動作しました。

[marlboro_tata]

何よりです。