拡大縮小はデザイン的にいまいち・・・かな
実用的とは言えないので完全にお遊びです。
前景を拡大縮小する事例
・要素を個々にスケーリング【背景画像を使うこれ】
・ブロック全体を一括でスケーリング【ちょっとトリッキー】
※上記２事例は同じに見えますがアプローチ方法が異なります。
夫々に一長一短があります。
※CSSのみで色々試しましたが
・前者はCSSのみで書くと子要素が多い場合に煩雑
・後者はCSSのみで実現する方法が思いつかない
・グローバル値として使える値が貧弱
└→100vwはスクロールバーも含みむので不都合
・実行時に動的に条件分岐が必要だった
ということでJavaScriptの力も借りています。
・前景画像のみをスケーリング【object-fit編】