アイキャッチ画像やサムネイル画像の他にも画像を並べて表示する際などは、画像の大きさを揃えた方がキレイで見栄えも良くなりますよね。だからと言って、毎回のように画像を同じサイズに加工するのは、手間のかかる作業です。
それならCSSで画像のサイズが同じになるように指定すればいいんだ！と、やってみたら・・・長方形の画像（縦長・横長の画像）は伸びたり縮んだりしてカッコ悪くなってしまった（泣）なんて方も多いのではないでしょうか？？
今回はそんなお悩みを超簡単に解消できる方法をご紹介します！
CSSで画像を希望の大きさにする方法
まずは、こちらの画像を希望の大きさになるようにCSSで指定してみましょう。
画像のサイズを指定
まずは、画像の縦と横の長さを指定します。
希望のサイズにはなりましたが、画像の縦横比率が崩れてカッコ悪くなってしまいました。
縦横比率を変えずに切り抜く
先ほどのCSSコードに一行追加してみましょう。
どうでしょうか？希望のサイズで画像の中央部分が切り抜かれた状態になりました。「object-fit:cover;」を追記するだけで、綺麗に画像を切り抜く事が出来ます。
このように「object-fit:cover;」はアスペクト比を維持したまま、指定されたサイズの大きさに合うように画像が拡大縮小されます。はみ出した部分は切り取られます。
切り取りたい部分が中央部分ではない場合
切り取りたい部分が画像の中央部分ではない場合「object-position」を利用しましょう。
「object-position: 横位置 縦位置;」と指定すれば、任意の位置で切り取りが可能です。
このように、画像の左の方が切り取られました。
最後に注意点
いかがでしょうか？「object-fit:cover;」を使うまでは「background-size:cover;」とか「position:relative;」「position;absolute」などを駆使してやっていましたが、「object-fit:cover;」だと１行追加するだけで良いので簡単ですよね♪
ただ・・・「object-fit:cover;」はIEだと上手く動きません・・・（泣
IEとChromeでの見え方を比べてみると、Chromeの画像は綺麗に表示されているのに対してIEの方は画質が落ちてしまっています。
この画像だと大して差は無いように感じますが、実際に自分でやってみて見比べてみてください。結構、画質に差があるのがわかります。
なので、気になる方は他の方法をオススメします。
