スマートフォンで画像をうまい具合に縦横比を維持して表示したい時ってありますよね
あります。
今までは、CSSのみでやるのは難しいなーって思ってたのですが、先日上手い方法を知ったので、ここにメモっておきます。
自分のブログにも謎の文字羅列を書いたのですが、記録として残しておかないと僕が忘れるので、書きます。
HTML
<html>
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="wrapper">
<a class="image" href="#" style="background-image:url(sample.png)">dummytext</a>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
height: 70%;
padding-top: 70%;
position: relative;
display:block;
}
a.image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-indent:-9999px;
}
何が嬉しいの？
heightを%で指定できるので、画面を回転させた時とかに破綻せずに表示出来るってのが嬉しいんです。
今まで、高さに大体○○pxとか指定して誤魔化していたのですが、この方法を使う事で比率を計算して表示できるので、大変ありがたいですね。
px単位で指定する方式はかっちり決まるので、ちゃんとデザインやってる人には相変わらず良い方法だと思いますが、僕のようにてきとーにやってきた人からすると、比率で大まかな表示をコントロールできるこの方法は眼から鱗が落ちる感じでした。
簡単な解説
wrapperのheightに70%を指定していますが、これは横幅を100%として、それに対する70%として解釈してくれます。
しかし、そのままですとwrapperの高さは0pxです。これに擬似的に高さを出すためにpadding-topに同じ%を指定します。
このままですと、padding-topを指定しただけですので、子Nodeのaタグは表示されない位置になるので、positionで調整する事でいい感じに画像を表示出来ます。
あと、分かる人には分かりますが、aタグの高さと幅はwrapperの高さと幅になるので、100%指定する事でぴっちり表示されます。
wrapperのサイズを変更すればaタグのサイズも自ずとサイズ変更されるのが非常に嬉しいですね。
応用編
例えば、wrapperのwidthを50%にして、displayをinline-blockにして、2つ以上Nodeを並べるとタイル上に表示出来たりします。色々応用出来る技術だと思いますので、参考にしてください。