どうもshinyaです。
現在はインターネットの閲覧のほとんどが
スマホになってきましたね。
さて、サイト運営していくと、PCでサイトを
しっかり整えたとしてもスマホで自分のサイトを
見ると「えっ？」みたいなこともよくあります。
今回でいうと、画像のサイズです。
PC用にうまく画像の大きさを調節して表示
させていたとしても、スマホで見ると
そのままデカく表示されていたりすることが
あります。
このままにしておくと画像サイズに画面が
合わせてしまう為、ユーザビリティが下がります。
そこで今回この問題の超簡単な方法をお伝えしていきます。
スマホの大きさに画像を最適表示する方法
実は特に手順があるわけでもなく、
CSSに下記をコピーして貼り付けるだけです。
/* 画像サイズ最適表示 */
img {
max-width: 100%;
height:auto;
}
超簡単です。
CSSのどこにいれるかわからない人は、
一番下に貼り付ければOKです！
これで、しっかり、スマホで見ても画像の
大きさが自動で最適化され表示されます。
スマホで自分のサイトを見たときに画像が
大きすぎてどうすれば良いかわからない人は
是非こちらをお試しください。
