inset: 0;、topとbottomにマイナスの値を指定して画像を拡大させたい。

実現したいこと

パララックス実装のためにinset: 0;、topとbottomにマイナスの値を指定して画像を拡大させたい。

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

とあるパララックス実装の記事で、下記のようなことが書かれていたので実装を試みたのですが画像が上に移動するだけで拡大がされませんでした。

『どちらのアプローチも正しいことは大前提として、もう少し簡単で保守しやすいものはないかと考えたのが以下のアプローチです。
まず画像の枠となる要素にrelativeを設定し、画像を囲うdivタグに対してabsoluteを設定します。画像要素に対して、insetを0にした後、topとbottomにはそれぞれ移動幅×(-1)の値を追記します。
こうすることで、デザインカンプから再度トリミングを行う必要もなければ、移動幅と画像サイズが連動しているため、コードの保守性も高くなります。
また、移動値を変数としておくことができるため、こういった面からでもメンテナンスがしやすいコードと言えます。』

該当のソースコード

HTML
1<div class="img popup">
2  <img src="images/index_mainImage04.jpg" alt="" >
3</div>

CSS
1>.img {
2  position: relative;
3  width: 850px;
4  height: 467px;
5  overflow: hidden;
6  --move-distance: 30vh;
7
8  >img {
9    position: absolute;
10    inset: 0;
11    top: calc(var(--move-distance) * -1);
12    bottom: calc(var(--move-distance) * -1);
13    top: -200px;
14    bottom: -200px;
15    width: 100%;
16    object-fit: cover;
17    --y-offset: 0%;
18    transform: translateY(var(--y-offset));
19  }
20}

試したこと・調べたこと

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

上記の詳細・結果

AIや検索でいろいろ調べたのですが原因は分かりませんでした。開発ツールでも記述の通り反映されていました。

補足

特になし

maisumakun

2025/12/08 08:21

.img>imgに、topとbottomが2回ずつ書かれていますが、それは意図的なものですか？

Lhankor_Mhy

2025/12/08 08:22

問題を再現するために必要なコードを提供してください。パララックス効果を出すのであれば、スクリプトを使うか、CSSだけで対応するならスクロールタイムラインが必要になるかと思います。

kylojin

2025/12/08 08:52

>>maisumakunさん申し訳ありません。記述ミスです。top: -200px;、bottom: -200px;の方です。 >>Lhankor_Mhyさんすみません。質問の意図はタイトルの通り、inset、topとbottomで画像を拡大したいということのみです。一応前提でなぜこれがしたいのか書いた方がいいのかと思ってパララックス実装のためと書きました。

Lhankor_Mhy

2025/12/08 09:32

どのような結果を想定しているのかよくわからないのですが、overflow: hidden;が効いているため切り取られている、とかそういうことではなく？

Lhankor_Mhy

2025/12/09 01:03

もしかして、overflow: hidden;による切り取り以前のサイズで、img 要素の高さを467+200+200にしたいってことでしょうか？　だとすると、height: auto;では画像のアスペクト比が効いてしまうので、そのままではできないと思います。

kylojin

2025/12/09 02:50

>>Lhankor_Mhyさんおっしゃる通り、img 要素の高さを467+200+200にしたいということです。画像ではなく、ただのdiv要素では縦にしっかり伸びたのですが、imgタグだとなぜか行きません。

Lhankor_Mhy

2025/12/09 03:00

回答しました。