CSSで画像をトリミングして中央表示する方法

今日ちょうど仕事で使ったんですが、CSSで画像をトリミングする方法をご紹介します。

例えば720px×480pxの画像があったとして、400px×300pxにトリミングしたいとします。

【例：720px×480pxの画像】

この場合、画像（imgタグ）を400px×300pxの親要素（divなど）で囲って、
親要素に「overflow:hidden」をかけてやれば、はみ出した部分が非表示になってトリミングできます。

ただ、これだけだと画像の左上からトリミングすることになってしまいます。
【左上からトリミングした状態】

画像の中心をトリミングしたい場合、ちょっとしたテクニックがいります。

以下はそのサンプルコードです。

【HTML】

<div class="box">
  <img src="image.jpg" width="720" height="480" alt="トリミングしたい画像">
</div>

</div>

【CSS】

.box {
  position:relative;
  width:400px;
  height:300px;
  overflow:hidden;
}
.box img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.box {

position:relative;

width:400px;

height:300px;

overflow:hidden;

}

.box img {

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

「position:absolute」で親要素の中心（top:50% left:50%）に画像の起点を指定し、
「transform:translate(-50%,-50%)」で画像の中心を親要素の中心に持ってくるのがポイントです。

【画像の中心からトリミングした状態】

この方法を使うと、JavaScriptを使わなくても親要素より大きな子要素を中心に合わせることができるので便利です。
レスポンシブサイトなどで、画面幅に合わせて要素の幅が可変になる場合であっても、
縦横比を維持したまま画像を中央に表示することが出来たりします。

ただし、「transform」プロパティはIE9以下など古いブラウザでは効かなかったりするので注意です。