CSSだけで縦横比率を保持したまま縮小しつつ、中央位置余白なく正方形にトリミングしたサムネイル画像を表示する方法

CSSだけで縦横比率を保持したまま縮小しつつ、中央位置余白なく正方形にトリミングしたサムネイル画像を表示する方法の画像

この比率を維持したままサムネイル画像を表示するのは、昔から苦労していました。
Jqueryで頑張ってみたりするんですが、JSだとタイムラグが発生しまったりで満足にいきません。
また別方法でCSSで頑張ってみても、縦横比を保持したサムネイル画像はできるんですが、画像が縦長や横長だと、上部や左右に余白ができる画像になってしまったり、逆に余白はできないけど、画像が大きすぎてトリミング画像だけみても何かわからなかったりと、悪戦苦闘していました。

しかし昨今では古いIEとかもう無視していいよね?っていう風潮が当たり前になってきました。だからこそようやく使えるStyleがでてきました。
今回のキモとなるCSSはbackground-sizeです。
そうです。発想の転換というか、画像はimgタグじゃないと・・・っていう考え方はここは捨ててしまいましょう。
もう背景画像でいいじゃん。ね?
まあ、サイトによってはimgタグじゃないと都合悪いよっていう場合もあるので、そういう人はこの記事はまったく参考になりません。すみません。戻るボタンでGoogleにおかえりください。
私もimgタグを使いながら、CSSだけで比率保持しつつ、正方形に隙間なくトリミングするサムネイル画像の作り方は知りません。
あるなら切実に教えてほしい。
基本ベースは以下のような感じで、spanタグの背景として画像を設定します。

HTML

<span class="thumb" style="background-image: url('example.jpg')"></span>

CSS

span.thumb{
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
}

サンプル

これが元画像

元画像

このやり方で正方形に比率を保持しながら綺麗にトリミングできました。

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト