CSS 要素の可変の制御

要素の大きさや縦横のサイズをCSSで変更するサンプルです。

トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。

そんなときは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;
    }

こんなスタイルを割り当てています。

次は水平への伸縮のみ操作可能のパターン。