異なるサイズの画像でRetina対応をする方法

個人的にRetina対応をする場合、imgタグのwidth/heightに実サイズの半分を指定するか、画像サイズに応じてCSSでパーセントでサイズを指定することが多いです。
今回これらの対応ができない条件でRetina対応する必要があったので、他の対応方法がないかを調べてみました。

サンプルコード

今回対応が必要だったのは以下のような条件でした。

• スマートフォン向けのサイトでRetina対応をする
• 幅は画像毎で異なる(高さは同じ)
• 画像はシステムで機械的に出力される(imgタグに幅/高さの指定は極力しない方向)
• 画像内の文字のサイズ感は揃えたい

対応前は以下のようになります。

HTML

<p class="sample sample1"><img src="./name01.png" /></p>
<p class="sample sample2"><img src="./name02.png" /></p>
<p class="sample sample3"><img src="./name03.png" /></p>
<p class="sample sample4"><img src="./name04.png" /></p>
<p class="sample sample5"><img src="./name05.png" /></p>

CSS

.sample img {
	display: block;
}

対応前のデモページ

今回は条件に合っていないのでできませんが、widthとheightに実サイズの半分を指定する方法です。

HTML

<p class="sample sample1"><img src="./name01.png" width="186" height="34" /></p>
<p class="sample sample2"><img src="./name02.png" width="145" height="34" /></p>
<p class="sample sample3"><img src="./name03.png" width="148" height="34" /></p>
<p class="sample sample4"><img src="./name04.png" width="150" height="34" /></p>
<p class="sample sample5"><img src="./name05.png" width="180" height="34" /></p>

この場合画像サイズは固定になるので、画面幅の広さに関係なく同じサイズになります。
widthとheightを指定するデモページ

同じく今回はできませんが、画像サイズに応じてCSSでパーセント指定する方法です。

CSS

.sample img {
	max-width: 100%;
}
.sample1 {
	width: 49.73333%; /* 373px / 750px * 100 */
}
.sample2 {
	width: 38.66667%; /* 290px / 750px * 100 */
}
.sample3 {
	width: 39.6%; /* 297px / 750px * 100 */
}
.sample4 {
	width: 40%; /* 300px / 750px * 100 */
}
.sample5 {
	width: 48%; /* 360px / 750px * 100 */
}

この場合は画面幅の広さに応じて比率を維持したまま拡大・縮小されます。
CSSでパーセント指定するデモページ
　

ここからが今回検討した方法になります。
まずはtransformのscale()を使う方法です。

CSS

.sample img {
	transform: scale(0.5);
}

これで画像は実サイズの半分で表示されましたが、縮小する基準位置が画像の中央のため位置がずれています。
transform: scale()のデモページ

transform-originを使って基準位置を左中央にしてみます。

CSS

.sample img {
	transform: scale(0.5);
	transform-origin: left center;
}

これで左端で揃いましたが、画像の間隔はあいたままになっています。
transform: scale()のデモページ2

今回は画像の高さは同じになる条件なので、画像の実サイズの高さの半分を親要素に指定します。
合わせてtransform-originを左上に変更します。

CSS

.sample {
	height: 34px;
}
.sample img {
	transform: scale(0.5);
	transform-origin: left top;
}

これでimgタグにwidthとheightを指定した時と同じ表示になりました。
transform: scale()のデモページ3
　

次にzoomを使う方法を試してみます。

CSS

.sample img {
	zoom: 0.5;
}

この場合でもtransform:scale()を使った時と同じ表示にできました。
zoomのデモページ
　

最後に親要素を縦横比を維持したまま拡大・縮小できるようにして、imgの高さを100%にして高さを揃えるようにしてみます。

CSS

.sample {
	position: relative;
	width: 100%;
	padding-top: 9.06667%; /* 68px(高さ) / 750px(幅) * 100 */
}
.sample:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.sample img {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
}

この場合、画像サイズに応じてCSSでパーセント指定する方法と同じ表示にできました。
親要素で縦横比を指定するデモページ

最大幅を指定したい場合、さらに親を囲ってmax-widthで対応できます。

HTML

<div class="sample_wrapper">
	<p class="sample sample1"><img src="./name01.png" /></p>
	<p class="sample sample2"><img src="./name02.png" /></p>
	<p class="sample sample3"><img src="./name03.png" /></p>
	<p class="sample sample4"><img src="./name04.png" /></p>
	<p class="sample sample5"><img src="./name05.png" /></p>
</div>

CSS

.sample_wrapper {
	max-width: 750px;
}

親要素で縦横比を指定するデモページ2
今回は画像の高さが同じになるという条件だったので対応できましたが、高さが異なる場合はJavaScriptで画像のサイズを取得して調整する必要があるかもしれません。