トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。
そんなときは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;
にするだけです。
