鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

読み込んだ画像のプレビューで中央縦横真ん中に配置したい

画像をファイルを読み込む部品を作っています。
プレビューするjQueryやinputタグのデザインは以下で書きました。

tacosvilledge.hatenablog.com


読み込んだ画像が縦横どんなサイズの画像だったとしても、適度な大きさで真ん中に配置して表示したい、と思ったのですが、これがなかなかうまくいかない。

いろいろ探したあげく、こちらの方がシンプルな良いCSSの書き方をまとめていてくださったので、今後同じことで悩まないように、備忘で貼っておきます。

同様に悩んでいる人も、ぜひこちらの方のコードを参照すると良いと思います。


bashalog.c-brains.jp


ポイントとしては、以下の三つ

  • 表示で一番大きい場合の縦横サイズをそれぞれ指定した箱を作り、display:table-cell をつけておく
  • さらに、text-align:centerと、vertical-align:middleをつけておく
  • その箱の中のimgタグには、max-widthとmax-heightを上記箱の縦横サイズで指定する一方、heightとwidthはautoとしておく


簡単なようで、結構うまくいかないのが、縦横真ん中表示ですよね・・・。