CSSだけでできる!overflow:hiddenを使用した画像の中央トリミング決定版

overflow:hiddenしたボックスの中に画像を入れて、画像の縦横を:100%なんかしちゃったりしてトリミングすること多いと思うのだけど、最適なCSSを探してもどうも日本の記事は情報が古い記事が多い。

そんなこんなで世界各国の記事を探してたどり着いたトゥルーなトリミングテクニックをご紹介します。

さっさと結果だけ見たい人用: http://jsdo.it/kyou9/AmAV

ボックスのスタイル

HTML

<div id="Demo"><img src="http://deerest.co/assets/img/nothumbnail.png"></div>  

CSS

div{
    width: 256px;
    height: 256px;
    margin: 16px;
    overflow: hidden;
    background-color: #888;
    border: 1px solid #222;
}

oveflow:hidden以外のプロパティはデモ用です。

今回使う画像

Deerest

width:auto height:auto のパターン

そのままの画像で居たい時のパターン。

#Demo1 img{
    position: relative;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

解説

positionボックスの大きさに対しての50%の移動をし、
transform: translate画像の大きさに対して-50%の移動で調整しています。

CSS3で transform: translate が追加されたおかげで画像の大きさに対しての調整ができるようになったためにスマートな中央トリミングが可能になりました。

width:100% のパターン

#Demo2 img{
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

height:100% のパターン

#Demo3 img{
    position: relative;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}