レスポンシブを効率よく設定する方法の有無

Question

実現したいこと

@media only screen and (max-width: ●●●px) {...

上記の●●●を細かく設定しなくてもこちらの望む形で綺麗に画像が表示出来る方法があれば教えて頂きたいです。

発生している問題・分からないこと

スロット風のデザイン・動作をするホームぺージを作成中です。

≪背景簡易イメージ（PC）≫

≪背景簡易イメージ（スマホ）※PC用画像の左右余白を減らしたもの≫

≪リール画像簡易イメージ（同サイズのものを3つ用意し背景画像の上に横3連で配置）≫

≪動作簡易イメージ≫

上記の表示、及び動作をさせようとすると、ウィンドウサイズによってリール画像のスタート位置や表示サイズを細かく調整しないと背景部分からはみ出したり、途中で画像が途切れてしまうため、現状の私の知識では

@media only screen and (max-width: 1800px) {...
@media only screen and (max-width: 1700px) {...
@media only screen and (max-width: 1600px) {...
のように逐一レスポンシブ設定するしか思いつきませんでした。
コードも長くなりますしどう考えても美しいコードではないことはわかるのですが、これ以上どうすることも出来ないためもし良い方法がありましたら教えて頂けると幸いです。
また、Javascriptの知識は現在勉強中によりほぼないため、Javascriptで実現可能かどうかは試せておりません。

該当のソースコード

<div class="slot">
	<div class="screen">
		<ul class="banner">
  			<li class="reel"><img src="img●●●.png"></li>
  			<li class="reel"><img src="img●●●.png"></li>
  			<li class="reel"><img src="img●●●.png"></li>
		</ul>
	</div>
</div>

.slot{
	background: url(img●●●.png) top center no-repeat transparent;
	background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
    .slot {
	background: url(img●●●_sp.png) top center no-repeat transparent;
	background-size: 100% auto;
    }
 }

.screen{
	width: 60%;                /* リールの表示幅調整 */
	height: 1600px;            /* 下のスペース調整 */
	margin: 0 auto;            /* 中央寄せ */
	padding-top: 5.6%;            /* リール画像の始まりを下にずらす */
}
@media only screen and (max-width: 767px) {
    .charareel {
	width: 100%;
	height: 650px;
	padding-top: 24%;

    }
}

.banner{
	display: flex;
	margin:0 5%;/* 画像の左右に余白を入れる場合 */
}
@media only screen and (max-width: 767px) {
    .chara-banner{
	    margin:0;/* 画像の左右に余白なし */
    }
}

.banner li {
	width: calc(100%/3);/* 画像を横に3つ並べる場合 */
	height: 440px;
	box-sizing:border-box;
}
@media only screen and (max-width: 1800px) {
    .banner li {
	height: 410px;
    }
 }
@media only screen and (max-width: 1700px) {
    .banner li {
	height: 390px;
    }
 }
@media only screen and (max-width: 1600px) {
    .banner li {
	height: 360px;
    }
 }
@media only screen and (max-width: 1500px) {
    .banner li {
	height: 338px;
    }
 }
@media only screen and (max-width: 1400px) {
    .banner li {
	height: 310px;
    }
 }
/* 以下、@media only screen and (max-width: ●●●px) {...　で同様の処理 　*/

/* 画像の親要素のスタイル */
.reel {
  cursor: pointer;
  height: 600px;
  margin-inline: auto;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  width: auto;
}

/* 画像のスタイル */
.reel img {
  height: auto;
  left: 0;
  position: absolute;
  width: 100%;
}

/* 画像を最初は上にずらす */
.reel img:last-of-type {
  position: relative;
  top: -420px;
  transition: top .2s;
  transition-delay: 3s;
}
@media only screen and (max-width: 1800px) {
    .reel img:last-of-type {
	top: -310px;
    }
 }
@media only screen and (max-width: 1700px) {
    .reel img:last-of-type {
	top: -290px;
    }
 }
@media only screen and (max-width: 1600px) {
    .reel img:last-of-type {
	top: -270px;
    }
 }
@media only screen and (max-width: 1500px) {
    .reel img:last-of-type {
	top: -260px;
    }
 }
@media only screen and (max-width: 1400px) {
    .reel img:last-of-type {
	top: -240px;
    }
 }
/* 以下、@media only screen and (max-width: ●●●px) {...　で同様の処理 　*/

/* hoverすると画像が下がる */
.reel:hover img {
  top: 15px;
  transition: top .2s;
  transition-delay: 0s;
}
@media only screen and (max-width: 1400px) {
    .reel:hover img {
	top: 10px;
    }
 }
@media only screen and (max-width: 1000px) {
    .reel:hover img {
	top: 0;
    }
 }
@media only screen and (max-width: 767px) {
    .reel:hover img {
	top: 5px;
    }
 }
@media only screen and (max-width: 620px) {
    .reel:hover img {
	top: 0px;
    }
 }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

上記コード以外の手段が思いつきませんでした。

補足

特になし

Comments

[Lhankor_Mhy]

CSS中にある .chara-banner はご提示のHTMLの中でいうと、どの要素に当たりますか？ .banner でいいですか？

[enjoyannna]

失礼しました。bannerで合っています。質問内容も表記を統一し修正しました。

Answer 1

長さが何に依存しているのか今一つわからなかったので、一般論での回答をします。

パーセンテージ単位

たとえば、長さが親要素に依存している場合は、これでいいかと思います。横方向についてはこれで大体済むはずです。

vw vh 単位

ビューポートサイズに依存している場合、この単位を使います。
パーセンテージと異なり、画面幅を参照して高さを決めるなどができます。

calc CSS関数

計算で算出するものです。
たとえば、

        @media only screen and (max-width: 1800px) {
            .reel img:last-of-type {
                top: -310px;
            }
        }

        @media only screen and (max-width: 1700px) {
            .reel img:last-of-type {
                top: -290px;
            }
        }

↑このスタイルは、↓こう表現できるかもしれません。

            .reel img:last-of-type {
                top: calc(50px - 100vw * 0.2);
            }

aspect-ratio

縦横比を決めるものです。
たとえば、aspect-ratio: 1 / 2とすると、高さは必ず幅の倍になります。
この例で言うと、たとえばリールの高さが図柄2つ分と決まっている場合などに設定するといいかもしれません。

Comments

[enjoyannna]

回答ありがとうございます！
aspect-ratio: 1 / 2　の表記方法は恥ずかしながら知らなかったです。
表現例なども非常に参考になりましたのでコードを見直しつつ確認していきたいと思います。ご教示頂きありがとうございました！

Answer 2

画像を position: absolute; で絶対配置しているので、他の要素からは存在しないものとしして扱われるために、親要素(reel)の高さを設定する必要がでてきます。画像の位置をずらすにも固定値でtop値を設定する必要が出てくるためにメディアクエリで細かく設定する必要が出てきてしまいます。

position: absolute; をやめれば、画像の幅を100%にすれば高さも自動で決まりますのて、細かい調整は不要になります。
画像の移動は transform で設定すればいいでしょう。また、position: absolute;で位置を移動するより負荷が軽いといわれています。

transform - CSS: カスケーディングスタイルシート | MDN

.screen {
  width: 60%; /* リールの表示幅調整 */
  margin: 0 auto; /* 中央寄せ */
}

.banner {
  display: flex;
}

/* 画像の親要素のスタイル */
.reel {
  cursor: pointer;
  margin-top: 20px;
  overflow: hidden;
}

/* 画像のスタイル */
.reel img {
  width: 100%;
  transform: translateY(-100%);
  transition: transform 0.2s;
  transition-delay: 3s;
}

/* hoverすると画像が下がる */
.reel:hover img {
  transform: translateY(0);
  transition-delay: 0s;
}

追記

スロットの背景画像(赤枠と白いボックス3つ)は、画像でするより、CSSで設定した方が位置合わせしやすいし、負荷も軽いでしょう。サンプルを作成しましたので参考にしてください。

サンプル↓
CodePen

Comments

[enjoyannna]

回答ありがとうございます！
サンプルも非常に助かります。まだ自身の作業環境で試せていないのですが、上記のご説明とコードを参考にし作成させて頂きます。