サイトの一覧ページ等で画像のサムネイルを枠の上下中央に設置したいという要望がよくあります。

以前はjavascriptを使ってみたりしていたのですが、
ある条件下ではcssだけで設置することが可能なことを知りました。

ある要素を上下中央に設置する代表例としては、
left,topを50%にして、marginのleft,topをその要素の半分の数値のマイナスにする形だと思います。

しかし、CMSを使って更新するサイトの場合、画像のサイズがバラバラになる事が多く、marginの指定をすることができません。

そこで以下のようにすると、画像を上下中央にすることができます。

実際にDEMOがあります。
DEMO
元画像を下の方に表示しているので比べてみて下さい。

今までmarginで調節していたのを、css3のtranslateを使用することでサイズを指定する必要がなくなりました。
あとポイントとしては、
・画像が小さくても、高さか幅の短い方が100%になり、枠の中で余白が出ない

注意点としては
・枠のサイズが決まっている必要がある
・枠のサイズより大きい時に、短い方を100%にして…というのはできない
・大きすぎる画像を調節できない(DEMOではmax-width200pxを設定していますが…)

という感じです。

CSSで、短い方を基準として…みたいなことができるといいですね〜

….

なんとそれが近い未来できるようになりそうです。

object-fitを使う

css3の「object-fit」というプロパティでそれができます。
これは簡単に言うと、background-sizeのcontain,coverをimgタグで実装できるというものです。

ただ、ブラウザのサポートがIE,Edgeで全くサポートしてないため、まだ使うに注意が必要です。
Can I use… Support tables for HTML5, CSS3, etc

DEMOの下の方にあるのでそちらも良ければご覧ください。

方法はこれだけです！

画像が勝手にトリミングされて表示されています。
coverは枠内に余白が出ないように表示するため、短い方を指定されたサイズに合わせ、長い方は切ってくれます。
containは写真が全部表示されるようにするため、長い方を指定されたサイズに合わせます。そのため余白が生まれます。

これは素晴らしいですね！！

もちろん画像自体をトリミングしているわけではないので大きい画像を入れると重たくなってしまうので気を付けて下さい。

果たしてこれはいつIEに搭載されるのでしょうか…?

以下のサイトを見て勉強させていただきました。
ありがとうございます。

参考サイト：
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する – Qiita
【CSS】画像の上下中央配置とか画像配置に関するいろいろ – Snaplog