トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。
そんなときはCSSで制御できます。
以下の画像の右下をドラッグしてみてください。

上記のサンプルは、左上を起点に右へ下へ伸びていきます。
スタイルはこれだけ
.demo_box1{ resize: both; border: solid 3px #00F; background-color: #99CCFF; width:100px; height: 100px; overflow: auto; }
resize: both; が今回のテーマです。
トリミングの操作をするときは、そのサイズの縦横のピクセル数を保存させるイメージです。
次はちょっとCSSを組んで、中央に置いた要素が左右対称に広がるサンプルです。

切り抜きよりも拡大、リサイズで使えそうです。
親要素に
.demo_space{ display: flex; align-items: center; justify-content: center; }
その中の小要素に
.demo_box2{ resize: both; border: solid 3px #00F; background-color: #99CCFF; width:100px; height: 100px; overflow: auto; text-align: center; display: flex; align-items: center; justify-content: center; }
こんなスタイルを割り当てています。
次は水平への伸縮のみ操作可能のパターン。

resize: horizontal;
にするだけ。
次は上下への伸縮のみ操作可能のパターン。

resize: vertical;
にするだけです。