開いた時のウインドウサイズいっぱいに画像を表示したい

Question

タイトル通りなんですが、開いた時のウインドウサイズいっぱいに画像を表示したいです。
横は１００％ですが、縦はウインドウサイズの100%で少しスクロールしたら、次のコンテンツが見れるようにしたいのですが、うまくいきません・・・。
こちらのサイトさん（https://www.theport.jp/）のような感じを考えています。どなたかご教示いただけませんでしょうか。
よろしくおねがいします。

Answer 1

高さがウインドウサイズでしたら以下のようにしています。

<div class="mainvisual"></div>

.mainvisual {
  width: 100%;
  min-height: 100vh;
  height: 100%;
}

Answer 2

こいつ，動くぞ！

<input type="checkbox" id="tgl">
<label for="tgl"></label>

#tgl{
  position: fixed;
  z-index: 1;
}

label{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: skyblue url("https://placehold.jp/700x300.png") center center / contain no-repeat;
  transition: .5s;
}
#tgl:checked +label{
  background: skyblue url("https://placehold.jp/700x300.png") center top / contain no-repeat;
}

Comments

[liveasnotes]

（別投稿のコメント向けデモ）

Answer 3

横100%/縦100%ということはかならずどちらかが切れてしまいます。

そのことを踏まえて一番簡単な物を作ると次のような感じでしょうか。

<div id="frame">
  <img id="image"src="sample.png"/>
</div>

#frame{
  width:100vw;
  height:100vh;
  overflow:hidden;
}
#image{
  width:100%;
}

画像がある程度の高さを持っていても、overflow:hiddenがかかっているので、#frameより下の部分が見えることはありません。
（もっとも、画像の中心を中央に持ってくるというようなのには別の小技が必要ですが）

Comments

[liveasnotes]

質問者さんは退会済みのようなので，レスポンスは期待できないですよ^^

中央寄せは

#frame{
width:100vw;
height:100vh;
overflow:hidden;
position: relative; /*added*/
}
#image{
width:100%;
/*added*/
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

もしくは

#frame{
width:100vw;
height:100vh;
overflow:hidden;
/*added*/
display: flex;
align-items: center;
}

が要りそうですね

[s8_chu]

質問者さんも退会しているということなので、非常に細かいところにコメントを入れますが、今回の場合、前景ではなく、背景として画像を表示するべきかもしれませんね。
そうすれば、画像を画面の中心に配置するのも、1つのプロパティを指定するだけで済みそうですし。

[liveasnotes]

そうですね！
あと，いま試して気付いたんですけど，background-positionもアニメーションできるので，背景画像がベストかも知れないですね

[liveasnotes]

→https://teratail.com/questions/79246#reply-218066