スマートフォンで画像をうまい具合に縦横比を維持して表示したい時ってありますよね あります。 今までは、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> .wrapper { width: 100%; height: 70%; padding