position指定で画面幅が変わっても位置が変わらないようにしたいです

Question

###前提・実現したいこと
positionの指定で画面幅が変わっても指定の位置で動かないようにしたいです

普通のマックの画面で見るとこんな感じなのですが

大きめの画面で見るとこんな感じでずれてしまうのですが常に1枚めみたいに配置したいです

<div class="mainVisual">
		<div class="concept">
			<img src="img/concept_img1.png" class="cancept__img1">
			<img src="img/concept.png" class="cancept__img2">
			<img src="img/concept_img2.png" class="cancept__img3">
		</div>
	</div>

.mainVisual {
    background-image: url(../img/main.jpg);
    height: 100vh;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.cancept__img1 {
    position: absolute;
    top: 668px;
    left: 220px;
} 
.cancept__img2 {
    position: absolute;
    top: 733px;
    left: 419px;
} 
.cancept__img3 {
    position: absolute;
    top: 462px;
    left: 979px;
}

Answer 1

img位置は現状でも変わらないのでは無いでしょうか？

Comments

[ryuji000]

画像のようになってしまいます

[yoshinavi]

「px」は画面幅や高さに対応しないので「vw・vh」を使ってみてはどうですか？

[ryuji000]

試してみます

[ryuji000]

すみませんなかなかうまく行きませんでした

Answer 2

「こんな感じにしたい」と言っても、画像が１枚しかないので、
何とも言えないですが、CSSの中身的には、
横幅が広がっても、TOPからの距離とLEFTからの距離は
「指定の位置で動かないように」なってるんですけどね。

＜画像ファイルの中身は以下の認識で回答＞
main ：イスとか鏡の背景画像
cancept__img1 ：葉っぱの画像
cancept__img2 ：To feel the mood等の画像
cancept__img3 ：はさみの画像

案１）高さはpx、横は%。
⇒main.jpgに対して、高さを指定し、cancept__img*のtopはそのままで、leftを%に変更します。

⇒×なパターンとしては、画面の横幅が小さくなると、重なると思われます。

案２）案１＋cancept__imgを１つにし、divと画像のWIDTHも％指定もしくは中央寄せ（？/正しい形が不明なため）。
⇒cancept__img1～cancept__img3を１つの画像にします。

案３）そもそも全部を１つの画像にする。
⇒特にクリックとかする感じではなかったので、これで良いとは思いますが。

案４）いや、画像はまとめたくない・・・であれば？
⇒JSでmain.jpgの縦横幅を取得し、
cancept__img1～cancept__img3を好きなサイズにリサイズする。

案５）JSはできれば使いたくない・・・
⇒CSSでのレスポンシブという方法はどうですか。

全く試してないので、ダメな方法もあるかもしれませんが、
パッと思いついた内容です。

Comments

[ryuji000]

長文の説明ありがとうございました。
案3で解決することができました。
ありがとうございます