はじめに

「普段は画面の横幅いっぱいに表示されてほしいけど、ブラウザの拡大率を操作したら拡大はされてほしい」を出来るだけ簡単に（雑に）実現する。
（ブラウザ依存、PC以外の動作は見ていません）

背景

普通は、

で、解決すると思いますが、
例えば、対象の要素を直接触れないとか、画面ないの一部の要素だけに適用したいとかで使えない想定。

transformでどんなサイズでも合わせてしまえばいいじゃない

CSSだけで実現できないかと思ったが、早々に断念しJavascriptを利用。
（Javascriptを使うのであれば如何様にもやり方はあると思うが）

あたりは対応していない。

※Windowにfitするように試してるのでCodePenだと確認し辛いです。

最初はCSSだけで実現できないかと試したが、scale + calcを上手く扱えず、時間がかかりそうだったので断念

example.css

/* 計算結果の単位のせいか適用されない */
.ng {
  transform: scale(calc(100vw/2))
}

/* これだと動く */
.ok {
  transform: scale(calc(100/2))
}

Javascriptで大きさを合わせるだけだと拡大率などに関わらず、Windowに合うだけなので、そのあたりの情報を調査する。

拡大しているかの判定
innerWidthが表示領域、outerWidthがwindowの大きさを表す。
ブラウザの機能で拡大するとinnerWidthが小さくなるので、outerWidthに比べてinnerWidthが小さい場合、拡大されている。

main.js

// スクロールバーなどが含まれる為、このまま計算すると少しずれる（が、雑に丸める）
const zoom = Math.round(window.outerWidth / window.innerWidth);

transformでサイズを変更しても親の要素のサイズに反映されない
element.getBoundingClientRect()で高さを取得して、親要素に適用（単純にelement.offsetHeightだと、transform前の大きさがとれる）
この関数はとても便利だが、環境によってはダメかも？（参考: https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect）

main.js

// tramsformの適用後の高さを取得して、親要素に適用してスペースを確保（今回は高さのみ）
parent.style.height = element.getBoundingClientRect().height;