Webページを作っている時に、LPなどのカッチリとしたページでは、あらゆるサイズを固定化して、動的にサイズ変更されるのが、ブラウザの表示サイズぐらいです。
レスポンシブデザインによって、その表示サイズで、カッチリした固定サイズに変更するので、結果的にカッチリサイズで表示されます。
技術ブログを書いている時や、何かしらのWebシステムなどを作っている時に、表示するエレメントのサイズを自由に変更したくなる瞬間があります。
そんな時に、cssの設定だけで自由にサイズ変更ができるようになるので、このやり方覚えておいても損はないかもですね。
DIVタグのサイズを自由に変更できるようにする方法
コードと解説
div{
overflow:auto;
resize:auto;
}
div img{
width:100%;
height:100%;
object-fit:cover;
}
大前提として、overflowが"scroll"または、"auto"の場合（visible状態）の時にのみ使用できます。
そして、 resize:both; をセットすることで、サイズ変更が可能になります。
画像ファイルには直接resizeを指定することができないので、divタグなどを外側に配置してdivタグにresizeをセットします。
もし、横方向のみのリサイズであれば、
resize:horizontal;
縦方向のみのリサイズであれば、
resize:vertical;
このようにセットすると、良い感じにリサイズが可能になります。
min,maxのwidth,heightという設定をすることで、最大値、最小値を決めることもできます。
この設定の個人的思考
HTMLのデフォルトでこの機能が有効になっているのは、TEXTAREAタグだけだったので、他のタグにも適用できないかな〜と思っていたら、いとも簡単にできてしまったので、
色々なシステムで使うことができそうだと思ってブログに備忘しておきました。
最近、人から相談されて作ろうと思っているwebツールがありまして、そのツールを作る時に使える技術だな〜とおぼろげに考えていました。
意味ありげに含ませた言い方をして申し訳ないですが、ツールが出来上がってきたらまたご紹介させていただきますので、適当に待っていてくださいませ。
