可変する要素の真ん中に配置したい

Question

pictureとsourceを使い、デバイスサイズにあわせて画像が切り替わるTOPを作りました。
そのTOP画像の中央に、切り替わりに対応した画像(h1)を入れようとしているのですがうまくいきません。
positionで制御しようとしましたが切り替わるごとに画像が下の方にいってしまい不自然になってしまいます。
これは画像を切り替えごとに大きさを作り替えないといけないものでしょうか？

お手数をおかけしますがわかる方ご協力いただけると助かります。

切り替わりイメージは以下になります。画像の中央にリアルタイムで配置される画像を作りたいのです。
※ＴＯＰ画像の上にぴったり重なるように別画像をいれたいのでそれもイメージに反映されています。

	<div id="header_p" class="header_image"> 
		<figure class="bg_haikei">
			<p class="fade right"><タイトル</p>
			<picture>
				<source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/1920x1080.png 1920w, https://placehold.jp/3840x2160.png 3840w">
				<source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/2048x2732.png 2048w">
				<img sizes="(max-width:427px) 100wv" srcset="https://placehold.jp/720x1280.png 720w, https://placehold.jp/1080x1920.png 1080w, https://placehold.jp/1284x2778.png 1284w" alt="">
			</picture>
		</figure>
		<picture class="fade header_yama">
				<source media="(min-width:1000px)" sizes="100vw" srcset="https://placehold.jp/8271x847.png 1920w">
				<source media="(min-width:428px)" sizes="100vw" srcset="https://placehold.jp/8274x1094.png 1920w">
				<img sizes="(max-width:427px) 100wv" srcset="https://placehold.jp/4504x1095.png 1080w" alt="">
		</picture>
		<h1 class="logo_box">
			<img src="https://placehold.jp/1061x240.png" alt="" class="fade begi_logo">
		</h1>
	</div>

body{
	font-size:16px;
    }

section{
     display: block;
     margin: 0 auto;
    }

p {
	line-height:1.7rem;
}


img {
	display: block;
}

.header_image {
	width:100vw;
	position:relative;
	height:100vh;
}

.bg_haikei {
	height:100vh;
	z-index:0;
}

.header_yama {
	width:100vw;
	z-index:2;
	position: absolute;
	top:0;
	left:0;
}

p,h2 {
	z-index:4;
	color:#6D5C51;
}

.right {
	text-align:right;
	position: absolute;
	top:26px;
	right:20px;
	font-size:1.2rem;
	font-weight:bold;
	letter-spacing: 0.15rem;
}

img.begi_logo {
	position:absolute;
	display: block;
	top:40%;
	width:min(80vw,1133px);
	margin:0 auto;
	z-index:6;
}

main.bg_kiso {
	width:80vw;
	margin:0 auto;
}

.kikkake,.syoukai_n {
	display:block;
	width:86vw;
	margin:0 auto;
}

section.color_bg1 {
	background-color:#BFD5A0;
	padding-top:148px;
	padding-bottom:257px;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

.k_midashi {
	font-size:2.5rem;
	letter-spacing: 0.15rem;
	margin-bottom:24px;
}

.left2 {
	margin-bottom:88px;
}

.openbtn>p{
	font-size:0.8rem;
	letter-spacing: 0.1rem;
}

.syoukai {
	padding-top:120px;
	padding-bottom:180px;
	background:#F5F5F5;
}

section.color_bg2 {
	background-color:#F5F5F5;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

figure.zure1 img{
	width:100vw;
}

figure.zure2 img{
	width:53.6vw;
	margin-left:6.4vw;
	margin-top:-56px;
	margin-bottom:56px;
}

figure.zure3 img{
	width:85.9vw;
	margin-left:14.1vw;
}

Comments

[hatena19]

それぞれの画像のサイズが分からないので、HTML内の各画像のURLを下記のページのダミー画像のURLに置き換えてもらえますか。
https://placehold.jp/

[n2018]

失礼いたしました。別の質問と同様入れ替えさせていただきました。

Answer 1

最終的にどのようなレイアウトにしたいのか不明なので、
とりあえず、コードをみて気になった点と、レスポンシブ対応にする場合の一般論を回答しておきます。

---

width:100vw;という設定が散見されますが、100vwは垂直スクロールバーの幅も含まれた幅になります。
垂直スクロールバーが現れた場合、その分画面からはみ出すので水平スクロールバーも出てしまいます。
ここは、width:100%; にしておいた方がいいでしょう。これだと垂直スクロールバーの有無にかかわらず画面幅と同じになり、水平スクロールバーはでません。

---

img要素に幅(width)が設定されていません。設定されていないとオリジナルのサイズで表示されるので、今回のように画面より大きなサイズの画像だと画面からはみ出てしまいます。
親要素(今回はpicture, h1.logo_box)に希望のサイズを設定してimg要素はwidth:100%;として親要素の幅に合わせるようにするといいでしょう。

---

全体的なレイアウトをposition: absolute;で位置決めしてますが、position: absolute;を設定した要素は浮いた状態になるので、他の要素からないものとして扱われるので、全体のレイアウトに使うには不適切です。特にレスポンシブ対応にしようとする複雑になりがちです。

現在では、レスポンシブ対応レイアウトは、FlexBoxレイアウトまたはGridレイアウトを使うのが主流です。これで全体的なレイアウトを決めて、position: absolute;は、ある要素を背景画像の中央に配置するとか、特定の位置に重ねて配置するというようなときにピンポイントで使うといいでしょう。

---

以上の点を考慮して、設定を見直してみてください。

---

レイアウト画像が提示されましたので、それに合わせてアドバイスするなら、下記になります。

背景画像はCSSのbackground-imagedで設定した方が楽でしょう。
画面幅で画像サイズを変更したいならメディアクエリを使えば可能です。
中央に配置したい要素(画像)は FlexBoxレイアウトで縦横中央に配置すればいいでしょう。

上記をもとに一つのサンプルを作成してみました。

<div class="header"> 
  <div class="fade header_yama">
  </div>
  <div class="header-image">
  <h1 class="logo_box">
    <img src="https://placehold.jp/1061x240.png" alt="" class="fade begi_logo">
  </h1>
</div>

body {
  margin: 0;
}
.header {
  width: 100%;
  height: 100vh;
}
.header-image {
  width: 100%;
  height: 80vh;
  background: center / cover no-repeat url(https://picsum.photos/1920/1080);
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_yama {
  width: 100%;
  height: 20vh;
  background: center / cover no-repeat url(https://picsum.photos/1500/500);
}
h2 {
  color: #6d5c51;
}
.logo_box {
  width: 80vw;
}
.logo_box > img {
  width: 100%;
}

CodePenサンプル

Comments

[n2018]

ご回答ありがとうございます。どのようなレイアウトかわからないとのことだったのでイメージ画像を質問内に追加しています。
それを踏まえてもう一度調べていただくことはできませすでしょうか？
教えていただいた内容で修正してみましたが相変わらず中央にはなりませんでした。
flexやgridでできればしたいですが、調べたときに画像が重なる＋重なった画像同士が固定でくっつき続けるにはpositonが適しているとあったのでrelativeで頑張っていたのでした。
もしgridなどでそれができるのならばぜひ教えていただきたいです。

以上、不勉強で恐縮ですがご確認よろしくお願いいたします。

[hatena19]

背景画像はCSSのbackground-imagedで設定した方が楽でしょう。
画面幅で画像サイズを変更したいならメディアクエリを使えば可能です。
中央に配置したい要素(画像)は FlexBoxレイアウトで縦横中央に配置すればいいでしょう。

[n2018]

ご回答ありがとうございます。提示していただいたコードを試したところ、header_yamaの解釈が違ったためにうまくいきませんでした。解説画像を質問文に追加しています。
背景画像とheader_yamaはどちらも上の高さがtop:0;で重なり合っているため、提示していただいたコードではheader_yamaと背景画像の高さを合わせるとheader_yamaが消えて（隠れて）しまいます。
header_yamaの部分をheader-imageより下に配置してmargin-topをマイナスにすれば上で合わせることができましたが、下の要素（文章など）が上についてきてしまうので表示崩れが起きてしまいます。

[hatena19]

background の設定を header-image から、header に移動させたらどうですか。
回答のサンプルを修正しておきました。

background-image に背景画像を設定して、background-size: cover で、画面幅が変わっても、画面サイズに合わせて画像を切り取ってくれます。

[n2018]

修正していただいた内容でもなぜか画像がくっつかずに分離してしまうのと、自己解決しましたのでダイジョブになりました。
ご協力ありがとうございました。