レスポンシブ対応！CSSだけで画像の比率を変えず中央寄せで表示する

画像をサムネイルとして使いたいとき、サイズがまちまちのケースが多いのではないでしょうか。
レスポンシブにも対応したいところです。ですが横幅の上限を決めても縦幅が違ったり、それで縦幅を固定にすると比率が変わってぺちゃんこの画像になってしまったり、比率は守れても今度は画像の左上付近しか表示されなかったり。

色々試して最近はこちらのやり方が気に入っているので、ご紹介します。

CSSで中央揃えの画像サムネイルを作るコード

<div class="thumb">
	<img src="./image/thumb.jpg" />
</div>

.thumb {
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.thumb img {
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

絶対位置とtranslateの合わせ技で画像を中央に持っていく

やっている内容は簡単です。

絶対位置を position で指定する

.thumb {
    position:relative;
}
.thumb img {
    position: absolute;
}

まずは .thumb の position で子要素に対する相対位置を決め、.thumb の中の img は絶対位置を指定します。

.thumb img {
    top: 50%;
    left: 50%;
}

親要素の中で、上から50%、左から50%の位置に移動させます。このままでは中央に寄らず微妙にずれています。
これは、画像の左上を基準に移動しているためです。要素の半分の距離分、右側と下側に寄っている状態です。
なので、

translate で要素の半分の距離分を移動させる

.thumb img {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

今度は transform の translate を使って要素を移動させます。

親要素の左上からの位置を指定する absolute とは違い、translate に渡す値は、translate を使用する要素の左上からの距離です。つまり50%であれば、要素の中央までの距離分を移動できます。
これを使い、X方向、Y方向の両方に-50%を指定することで、親要素の中で中央に移動させることができます。