The current article
枠内で画像のサイズに合わせて上下左右中央揃えするCSS
縦横比を変えずに要素内に収め、余白ができれば上下左右中央揃えにしたい時に使えるCSSの記述方法です。
備忘録を兼ねてご紹介いたします。

capture
同じ比率の横画像ばっかりなんてこと少ないですよね・・・
このCSSを使うと、要素より大きい画像なら、縦、横、長いほうが要素いっぱいに収まり、比率を合わせて短い方も縮小され、余白ができれば縦横中央に整います。
要素より小さい画像は、もちろんそのまま中央に配置されます。
クライアントに画像投稿してもらう時(どデカい画像はやめて~)など重宝します。
以下、参考タグです。
HTML記述例
<div class="centered"> <div> <img class="adapt" alt="" src="image.png"> </div> </div>
3行目の「img」に「adapt」というクラスを付けるのを忘れずにー
CSS記述例
.centered { border: 1px solid #ccc; display: table; height: 100px; width: 150px; } .centered > div { display: table-cell; vertical-align: middle; } img.adapt { display: block; margin: 0 auto; max-height: 100px; max-width: 150px; }
「display: table-cell;」を使った書き方で、th や td と同じ性質を持たせて「vertical-align: middle;」を効かせています。
4行目・14行目の高さと
5行目・15行目の幅は、同じ大きさにして適宜変更すると良いと思いますー